【VUE】Vue使用v-viewer实现图片大图预览效果

1、安装

npm install v-viewer
或
yarn add v-viewer

2、main.js中注册

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

3、页面中使用

<viewer :images="images">
	<img v-for="src in images" :key="src" :src="src">
</viewer>

<script>
export default {
    data() {
      return {
        images: [
          "https://picsum.photos/200/200",
          "https://picsum.photos/300/200",
          "https://picsum.photos/250/200"
        ]
      };
    },
    methods: {},
  }
</script>

任意元素中都可添加v-viewer，该元素下的所有img元素都会被viewer自动处理
此处使用antdesign表格举个栗子

<!-- 代码片段 -->
<a-table
      :loading="tableLoading"
      :columns="columns"
      :data-source="wiList"
      bordered
      :pagination="true"
      rowKey="id"
      size="small"
      v-viewer
    >
      <span slot="action" slot-scope="text, record">
        <img
            v-if="imgSuffix.findIndex(item=>item==record.extension)>-1"
            :src="imageurl+record.path"
            style="width:50px;height:50px;"
          />
          <a v-else @click="selectRow(record)">查看</a>
      </span>
    </a-table>
//栗子说明：wiList是一个对象数组存放了一些文件，path是文件路径，extension是文件类型
//本段代码就是用表格将这些文件展示出来
//定义了一个action插槽,如果文件是图片的话则展示缩略图，如果是其他文件则是查看
//在 <a-table> 中增加了 v-viewew属性，他将自动处理说有img元素
//实现效果：点击缩略图即可触发v-viewer展示大图
<script>
export default {
    data() {
      return {
        imgSuffix:['png','jpg','jpeg'],
        wiList: [
	        { id: 1 , path: 'xxxxxxx', extension: 'jpg' },
	        { id: 2 , path: 'xxxxxxx', extension: 'pdf' }
      	],
	      columns:[
	      //......其他数据
		      {
			    title: '操作',
			    key: 'action',
			    scopedSlots: { customRender: 'action' }
			  }
	      ],
      };
    },
    methods: {
	    selectRow(record) {
	    //执行操作
	    }
    },
  }
</script>

4、相关连接

v-viewer:GitHub
v-viewer:中文文档