Vueviewerjs_0">Vue图片预览插件viewerjs
安装
npm install v-viewer
引入插件
//main.js文件
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
//属性配置
Vue.use(Viewer, {
defaultOptions: {
'inline':true,//自动缩放
'button':true, //右上角按钮
"navbar": true, //底部缩略图
"title": true, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": true, //是否支持键盘
// "url": "data-source",//图片地址
ready: function (e) {
console.log(e.type,'组件以初始化');
},
show: function (e) {
console.log(e.type,'图片显示开始');
},
shown: function (e) {
console.log(e.type,'图片显示结束');
},
hide: function (e) {
console.log(e.type,'图片隐藏完成');
},
hidden: function (e) {
console.log(e.type,'图片隐藏结束');
},
view: function (e) {
console.log(e.type,'视图开始');
},
viewed: function (e) {
console.log(e.type,'视图结束');
// 索引为 1 的图片旋转20度
if(e.detail.index === 1){
this.viewer.rotate(20);
}
},
zoom: function (e) {
console.log(e.type,'图片缩放开始');
},
zoomed: function (e) {
console.log(e.type,'图片缩放结束');
}
}
});
.vue图片预览页面使用
<viewer :images="srcListImg" class="demo-image__preview">
<img :src="item" alt="">
</viewer>
data() {
return {
images:[
{src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',index:1},
{src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',index:2},
{src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg',index:3},
{src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg',index:4},
]
}
}`
注意:
底部导航工具栏toolbar修改:
toolbar Object详解:
根据需求修改toolbar
Vue.use(Viewer, {
defaultOptions: {
'navbar': false, // 显示缩略图导航
"toolbar": { "zoomIn":true, "zoomOut":true, "oneToOne":true, "reset":true, "prev": false, "play":false, "next":false, "rotateLeft":true, "rotateRight":true, "flipHorizontal":true, "flipVertical":true},
}
});