vue3 + el-image-viewer 图片组件查看

Posted 2021-10-16 琳一123456

1. vue2+element -ui中

   <el-image-viewer
   
         v-if="show"
   
         :url-list="url"
   
        :on-close="closeViewer"
   
       />

   注意是on-close 

2. vue3+element-plus中

    就是close  url-list：图片数组

   getFullImageURL为图片地址处理函数

   <el-image-viewer
   
         v-if="show"
   
         :url-list="url"
   
         @close="closeViewer"
   
       />
   
   <template
   
                 v-for="(item, index) in list"
   
                 :key="index"
   
               >
   
                 <img
   
                   v-if="index == 0"
   
                   class="item-img"
   
                   :src="item"
   
                   @click="onPreview(list, index)"
   
                 />
   
               </template>

   //预览大图
   
         const onPreview = (url, index) => {
   
           debugger
   
           if (!index && index != 0)
   
             state.url = [state.getFullImageURL(url)]
   
           else {
   
             let list = []
   
             for (var i = 0; i < url.length; i++) {
   
               list.push(getFullImageURL(url[i].url ? url[i].url : url[i]))
   
             }
   
             state.url = list.slice(index).concat(list.slice(0, index))
   
           }
   
   
   
           state.show = true
   
         }
   
         // 关闭查看器
   
         const closeViewer = () => {
   
           state.show = false
   
         }