vue3 element-plus实现图片预览功能实例
作者：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图片预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！