element-ui之el-image-viewer(图片查看器)及单击,双击事件冲突解决

有时候我们的需求和组件提供的不一致,就需要自己封装组件,有的功能实现起来很麻烦,产品要做一个双击图片打开预览的功能,原生js实现有点费劲。我们看一下Image的源码,发现大图预览是一个小组件image-viewer,打开看看它的props,如下

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

我们需要使用到的就只有urlListonClose两个属性 ,一个用来放图片链接一个用来关闭查看器。

需要使用的属性我们知道了,然后我们就在代码里面引入image-viewer就可以直接使用。



                    
                    

你可能感兴趣的:(Vue,el-image)