【笔记记录】element-ui图片组件双击实现预览

1. 背景：公司产品设计希望能够实现双击图片时才进行预览，单击图片时为选中图片功能，公司UI框架使用的是element-ui
2. 具体需求：双击图片实现预览功能
3. 具体代码实现记录： 主要为使用element-ui隐藏组件image-viewer来实现，image-viewer组件需要单独引入
4. 代码示例：

<template>
    <div>
      <img
        :src="point.cover"
        class="cover-class"
        @dblclick="showViewer = true" />
      <el-image-viewer
        v-if="showViewer"
        :on-close="closeViewer"
        :z-index="9999"
        :url-list="[point.cover]" />
    </div>
</template>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue';
export default {
    components: { ElImageViewer },
    data(){
        return {
            point: {
                cover: 'xxxxxx'
            }
            showViewer: false
        }
    },
    methods:{
        closeViewer(){
          this.showViewer = false;
        },
    }
}