vue3 element-plus实现图片预览功能实例
更新时间：2023年09月08日 08:20:23 作者：ZL随心
这篇文章主要给大家介绍了关于vue3 element-plus实现图片预览功能的相关资料,在项目中我们经常会碰到图片预览的功能需求,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
效果
实现
element-plus下有这么一个组件 <el-image-viewer/>，但是这个组件是没写在文档上面的，像普通组件一样使用即可
可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览
封装组件
<template>
<div class="img-viewer-box">
<el-image-viewer
v-if="state.visible"
:url-list="props.imgs"
@close="close"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useVModel } from '@vueuse/core'
const props = defineProps<{
modelValue: boolean
imgs: string[]
}>()
const emits = defineEmits<{
(e: 'update:modelValue', data: boolean)
}>()
const state = reactive({
imgList: [],
// 相当于是set 与 get
visible: useVModel(props, 'modelValue', emits),
})
// 点击关闭的时候，连同小图一起关闭
function close() {
state.visible = false
}
</script>
<style scoped></style>组件使用
在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可
重点是上面的组件封装，看明白就会用了
<!-- 增加用于显示预览图片 --> <ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />
总结
到此这篇关于vue3 element-plus实现图片预览功能的文章就介绍到这了,更多相关vue3 element-plus图片预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Vue v-text指令简单使用方法,结合实例形式分析了v-text指令文本输出显示简单操作技巧,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了vue中的事件加判断条件如何进行选择性点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了 vue 动态组件component ，vue提供了一个内置的<component>,专门用来实现动态组件的渲染，这个标签就相当于一个占位符，需要使用is属性指定绑定的组件，想了解更多详细内容的小伙伴请参考下面文章的具体内容2021-11-11
解决使用vue-awesome-swiper组件手动滚动点击失效问题
这篇文章主要介绍了使用vue-awesome-swiper组件手动滚动点击失效问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
解决vue初始化项目一直停在downloading template的问题
这篇文章主要介绍了解决vue初始化项目一直停在downloading template的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue的provide和inject使用方法及其原理,本文通过源码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下2019-11-11
最近在项目开发中碰到一个需求是在页面中展示pdf预览功能,下面这篇文章主要给大家介绍了关于Vue3项目中预览并打印PDF的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
最新评论