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,vuejs流程图插件
}
},
methods:{
inited (viewer) {
this.$viewer = viewer
},
show(){
// 点开展⽰第⼀张
this.$viewer.index=0;
setTimeout(() => {
// 展开图⽚浏览
this.$viewer.show()
}, 1);
},
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。