转载：/fengyuanchen/viewerjs
预览效果：https://fengyuanchen.github.io/viewerjs/
在vue中的简单用法
第一步：安装插件
npm install viewerjs
第二步：在组件中引入
import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';
下面是在组件中使用的例子：
插件还有许多配置项，详情可参考作者的github：/fengyuanchen/viewerjs
<template><div class='container'><div style="margin: 100px 300px;"><h1>Viewer图片预览插件</h1><div style="width: 300px;"><img ref="image" src="@/assets/1127114401_AKHjy.jpeg" alt="Picture" style="width: 80%;"></div></div></div></template><script>import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';export default {name: 'index',components: {Cascader},data(){return{}},mounted(){// View an imageconst viewer = new Viewer(this.$refs.image);},methods: {}}</script><style scoped></style>
效果如下：
引入本地图片，并显示
<template><div class='container'><div style="margin-top: 100px;" ref="imageList"><h1>Viewer图片预览插件</h1><div style="width: 300px;display: inline-block;" v-for="item in imgs"><img ref="image" :src="item" alt="Picture" style="width: 80%;"></div></div></div></template><script>import Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';import img1 from '@/assets/1127114401_AKHjy.jpeg'import img2 from '@/assets/131131113416992x0ihdbg7_medium.jpg'import img3 from '@/assets/oYYBAFOpMQSICdfTABWEAqeTaUQAABopQJHyGoAFYQa258.jpg'import img4 from '@/assets/qqqq.jpg'export default {name: 'index',components: {img1,img2,img3,img4},data(){return{imgs: [img1, img2, img3, img4]}},mounted(){const viewer = new Viewer(this.$refs.imageList,{navbar: true, //底部缩略图title: true, //当前图片标题keyboard: true //是否支持键盘});},}</script>
效果如下：
