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获取HTMLCollection列表的children时结果为undefined问题
这篇文章主要介绍了Vue获取HTMLCollection列表的children时结果为undefined问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇主要介绍了Vue导出json数据到Excel电子表格的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
在前端开发中,我们经常遇到根据用户输入动态生成不同表单项的需求,本文将详细讲解如何使用 Vue 3 的响应式特性,逐步构建一个递归动态表单,感兴趣的可以了解下2024-12-12
这篇文章主要介绍了vue中使用render封装一个select组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue实现contenteditable元素双向绑定的方法详解
contenteditable是所有HTML元素都有的枚举属性，表示元素是否可以被用户编辑。本文将详细介绍如何实现contenteditable元素的双向绑定，需要的可以参考一下2022-05-05
这篇文章主要给大家介绍了关于通过vue.extend实现消息提示弹框的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理，对于理解Vue2的渲染机制和优化性能有很大的帮助。2023-04-04
本篇文章主要介绍了vue项目使用sass的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下2022-03-03
本篇文章主要介绍了vue中配置mint-ui报css错误问题的解决方法，非常具有实用价值，需要的朋友可以参考下2017-10-10
最新评论