JpImagePreview 图片预览

基础用法

对el-image的扩展，在一些特定场景，如果不允许点击图片进行预览，比如图片上有遮罩层，根本就不允许点击。jp-image-preview新增clickHandler方法，解决了这一场景的缺点。

点我预览

点我预览

点我预览

<template>
  <div style="display: flex">
    <div v-for="(item, index) in dataArray" :key="index">
      <pic :item="item" :srcList="srcList"></pic>
    </div>
  </div>
</template>

<script>
import Pic from './pic.vue'
export default {
  components: { Pic },
  data() {
    return {
      dataArray: [
        { img: 'https://img1.baidu.com/it/u=1340562147,2921803798&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200', title: '点我预览' },
        { img: 'https://img2.baidu.com/it/u=4290982249,3925173898&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200', title: '点我预览' },
        { img: 'https://img1.baidu.com/it/u=228665496,211985098&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200', title: '点我预览' }
      ],
      srcList: [
        'https://img1.baidu.com/it/u=1340562147,2921803798&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
        'https://img2.baidu.com/it/u=4290982249,3925173898&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200',
        'https://img1.baidu.com/it/u=228665496,211985098&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'
      ]
    }
  },
  methods: {}
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
imgIndex	指定图片	number	—	0

Methods

方法名	说明	事例
clickHandler	展示预览的方法	this.$refs.elImg.clickHandler()