前端图片预览组件
图片预览组件preview和v- viewer,在项目中preview插件功能简洁比较适合用在移动端的图片预览效果，而viewer里面功能较多用在PC端比较合适，具体情况视项目需求而定。
preview组件
主要功能
- 双击放大
- 图片移动
- 全屏展示
代码引入和使用
Vue的main.js全局引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
组件代码使用
<--标签内使用preview属性-->
<image src='' alt='' preview />
效果预览
v-viewer组件
主要功能
- 滚轮/点击放大缩小
- 反转旋转
- 多图分页/单图展示
- 重置全屏
- 图片拽动
代码引入
npm install v-viewer --save
#Vue
`引入`---全局 main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults(....)
`引入`---局部 vue文件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Viewer.setDefaults({
'inline':false,//启用 inline 模式
'button':true, //右上角叉掉按钮
"navbar": false, //底部缩略图
"title": true, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": true, //是否支持键盘
//"url": "data-source",//坑
defaultOptions: {
zIndex: 9999
},
});
组件使用
`使用` ---指令，组件，api
1.v-viewer插件组件
<viewer>
<img src="http://fastly.jsdelivr.net/gh/15826844126/blog@main/img/2.jpeg" width="300" />
</viewer>
2. v-viewer指令
<div class="images" v-viewer>
<img v-for="src in images" :key="src" :src="src">
</div>
...
data(){
return{
images:[
"http://fastly.jsdelivr.net/gh/15826844126/blog@main/img/2.jpeg",
"http://fastly.jsdelivr.net/gh/15826844126/blog@main/img/3.webp",
.....
]
}
}
3.v-viewer的Api
<button type="button" @click="show">查看图片</button>
...
data(){
return{
images:[
.....
]
}
}
methods:{
show() {
this.$viewerApi({
images: this.images,
})
},
}
修改配置项
//全局main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
'inline':false,//启用 inline 模式
'button':true, //右上角叉掉按钮
"navbar": false, //底部缩略图
"title": true, //当前图片标题
"toolbar": true, //底部工具栏
"tooltip": true, //显示缩放百分比
"movable": true, //是否可以移动
"zoomable": true, //是否可以缩放
"rotatable": true, //是否可旋转
"scalable": true, //是否可翻转
"transition": true, //使用 CSS3 过度
"fullscreen": true, //播放时是否全屏
"keyboard": true, //是否支持键盘
//"url": "data-source",//坑
defaultOptions: {
zIndex: 9999
},
});
解决配置项不生效
-
配置项使用了Options对象包含内容
-
配置项中有“ulr":"data-source",去掉即可
网上百度出来的配置项大部分是在Options中设置，结果发现点击图片没有效果点击不动，如果改了Options去掉后还是没有生效，还有另外一个原因那就是配置项设置了"url": "data-source" ，把这个注释掉就ok了
这里去掉了图片名称和底部缩略图
效果预览
默认所有配置项都为true(修改见上)
