vue 中使用图片查看器插件Viewer.js
一款可以进行预览图片的功能插件viewer.js
先下载插件依赖
npm install v-viewer --save
在main.js里全局引用
// 图片预览
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
Options: {
"inline": true, // 启用 inline 模式
"button": true, // 显示右上角关闭按钮(jQuery 版本无效)
"navbar": true, // 显示缩略图导航
"title": true, // 显示当前图片的标题(现实 alt 属性及图片尺寸)
"toolbar": true, // 显示工具栏
"tooltip": true, // 显示缩放百分比
"movable": true, // 图片是否可移动
"zoomable": true, // 图片是否可缩放
"rotatable": true, // 图片是否可旋转
"scalable": true, // 图片是否可翻转
"transition": true, // 使用 CSS3 过度
"fullscreen": false, // 播放时是否全屏
"keyboard": true, // 是否支持键盘
}
});
在需要引用的页面写上
<!--这里的imageList是一个由图片路径组成的数组,一般后台获取,也可以自己在data中定义静态的图片路径数据-->
<viewer :images="imgsList" @inited="inited"class="viewer" ref="viewer">
<div class="map-img">
<div v-for="(item, index) in imgsList" class="map-list">
<span>{{item.title}}</span>
<img :src="item.photo" :alt="item.title" :key="index">
</div>
</div>
</viewer>
<script>
export default {
data() {
return {
imgsList:[],
total:'',
pageSize:10,
pageNum:1,
}
},
methods:{
inited (viewer) {
this.$viewer = viewer
},
show(){
// 点开展示第一张
this.$viewer.index=0;
setTimeout(() => {
// 展开图片浏览
this.$viewer.show()
}, 1);
},
}
}
</script>
本文来自博客园,作者:小基狠努力啊,转载请注明原文链接:https://www.cnblogs.com/ylh188/p/15133284.html