vue2 el-image 本地加载图片

如何在项目中使用element ui 中的 el-image 展示图片并点击图片开启幻灯片模式

1.本地常量的准备

因为图片比较多，而且图片也分为展示的简图和详情大图，所以直接在常量中记录图片的名称。

// contents index.js

export const imagesArr = {
    one: {
        key: '1',
        smallSrc: 'small_image_one',
        bigImagesArr: ['big_image_one_1']
    },
    two: {
        key: '2',
        smallSrc: 'small_image_two',
        bigImagesArr: ['big_image_two_1', 'big_image_two_2']
    }
}

2.在请求中获取对应的key

这部分只要是判断需不需要展示。

//  page/layOut/custInfo.vue
import { imagesArr } from './contents'
computed: {
    isShowImage () {
        const key = this.custInfo.labelImage
        let arr = Object.values(imagesArr).filter(item => item.key === key)
        if(arr.length > 0) {
            const { smallSrc, bigImagesArr } = arr[0]
            this.custSmallImage = require(`../../../assets/image/${smallSrc}`)
            this.custImagesArr = bigImagesArr.map(item => {
                return require(`../../../assets/image/${item}`)
            })
        }
        return arr.length > 0
    }
}

因为我这里的图片只会展示一张简图，所以我直接解构过滤出来的数组，但是展示的大图可能会有多张，所以custImagesArr 要map处理一下。

3.在模板上使用

<el-popover
    v-if='isShowImage'
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover">
    <el-image style="width: 100px; height: 100px" :src="custSmallImage" :preview-src-list="custImagesArr" />
    <i class='el-icon-user-solid' slot="reference">hover 激活</i>
  </el-popover>

正常情况下，这已经可以了，但是如果用户在移动到 i标签时，展示简图，点击简图展示大图后，关闭幻灯片模式，简图仍然显示，而且必须要鼠标再次移动到简图上再移出简图，图片才不显示，不是符合我心中的效果。

components: {
  'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
}

<el-popover
    v-if='isShowImage'
    placement="top-start"
    title="标题"
    width="200"
    ref='custImageLabel'
    trigger="hover">
    <el-image style="width: 100px; height: 100px" :src="custSmallImage" @click ='handleClick' />
    <el-image-viewer style='color: #fff' :url-list='custImagesArr' v-if='isShowBigImage' :on-close='handleClose' />
    <i class='el-icon-user-solid' slot="reference">hover 激活</i>
  </el-popover>


    method: {
        handleClick () {
            this.isShowBigImage = true
        }
        handleClose () {
            this.isShowBigImage = false
            this.$refs.custImageLabel.doClose()
        }
    }

使用el-image-viewer组件创建大图，在data中新建isShowBigImage控制大图的显示和隐藏。url-list是展示的图片的数组，关闭事件on-close触发关闭el-popover简图