el-image隐藏组件el-image-viewer点击次序预览图片

分手后的思念是犯贱 2022-12-26 08:27 258阅读 0赞

最近工作项目中有个需求，非要点击“预览”文字进行图片组的大图预览，想着技术栈中刚好有elementui，可以借用el-image的预览功能。但…实在有些许鸡肋，功能的自由感太低了，只能点击图片并永远只从第一张图开始预览，这确实难以满足实际工作需求。  
后来查阅资料得知el-image的预览功能在源码中其实是一个拓展组件完成的，于是我去源码里摸摸，发现还真有el-image-viewer这个独立组件，只不过官方文档中未将其拎出介绍。代码不复杂，毕竟样式和功能不多，也就放大缩小前进后退关闭等，主要看到props属性方面：

export default { 
      name: 'elImageViewer',
      props: { 
        urlList: { 
          type: Array,
          default: () => []
        },
        zIndex: { 
          type: Number,
          default: 2000
        },
        onSwitch: { 
          type: Function,
          default: () => { }
        },
        onClose: { 
          type: Function,
          default: () => { }
        }
      },

urlList：用于预览的图片组，预览时从第一张开始，即urlList\[0\]；  
zIndex：无异于el-image的zIndex属性，预览的层次；  
onSwitch：打开组件方法；  
onClose：关闭组件方法；  
实际工作中常用的也就urlList和onClose。不过刚也说到了，预览功能只会从第一张图开始展示，然而我们通常会希望用户点击哪一张就从这张图开始展示并可进行顺序预览。所以我们需要在每次预览前对urlList进行排序计算，下面是我个人工作中写的部分代码：

<el-button size="mini" type="text" @click="previewFile(form[itm.prop], scope.$index)">预览</el-button>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
    />
    
    <script>
    export default { 
      components: { 
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
      },
      data() { 
        return { 
          showViewer: false,
          srcList: []
        }
      },
      methods: { 
        // 预览文件
        previewFile(data, index) { 
          this.showViewer = true
          const urlList = data.map(item => {  return item.url })
          const temp = []
          for (let i = 0; i < index; i++) { 
            temp.push(urlList.shift())
          }
          this.srcList = urlList.concat(temp)
        },
        // 关闭查看器
        closeViewer() { 
          this.showViewer = false
        },
      }
    }
    </script>

方法不难，记得要引入和声明el-image-viewer组件。根据用户点击的图片序号，将其之前的图片按序抽出并依次放进另一个数组，最后将新数组拼接到原数组后面，这样就形成了一个动态的次序预览，完美解决需求了。