vue3 element-plus 实现图片预览

• 
  
  
  
  • 结果
    
  
  
    
  

                         2、实现

   element-plus下有这么一个组件 <el-image-viewer/>，但是这个组件是没写在文档上面的，像普通组件一样使用即可
  可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览
  2.1封装组件

1. <template>
2.   <div class="img-viewer-box">
3.     <el-image-viewer
4.       v-if="state.visible"
5.       :url-list="props.imgs"
6.       @close="close"
7.     />
8.   </div>
9. </template>
11. <script lang="ts" setup>
12. import { ref, reactive } from 'vue'
13. import { useVModel } from '@vueuse/core'
14. const props = defineProps<{
15.   modelValue: boolean
16.   imgs: string[]
17. }>()
18. const emits = defineEmits<{
19.   (e: 'update:modelValue', data: boolean)
20. }>()
21. const state = reactive({
22.   imgList: [],
23.   // 相当于是set 与 get
24.   visible: useVModel(props, 'modelValue', emits),
25. })
27. // 点击关闭的时候，连同小图一起关闭
28. function close() {
29.   state.visible = false
30. }
31. </script>
33. <style scoped></style>

复制代码

2.3组件使用

  在必要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可
  重点是上面的组件封装，看明确就会用了

1. <!-- 增加用于显示预览图片 -->
2. <ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />

复制代码

来源：https://blog.csdn.net/weixin_44832362/article/details/128821438
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！