Wuxh

Front-end Development

0%

NPM PLUGIN vue-photo-preview

在开发项目过程中,遇到一个需求,能不能像微信朋友圈图片一样点击查看原图,并且放大查看

百度了解了一下 诸如此类的插件有 vue-photo-preview 、PhotoSwipe.js 、PinchZoom.js

我在 vue 项目中选择使用 vue-photo-preview
vue-photo-preview npm 地址

安装

1
npm i vue-photo-preview

项目中注册

1
2
3
4
5
6
7
// 移动端Vue.js图片预览插件
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';

Vue.use(preview, {
fullscreenEl: false // 关闭全屏按钮
});

示例代码

  • img 标签添加 preview 属性; preview 值相同即表示为同一组
1
2
3
4
5
<img src="xxx.jpg" preview="0" preview-text="描述文字" />
<img src="xxx.jpg" preview="1" preview-text="描述文字" />
<img src="xxx.jpg" preview="1" preview-text="描述文字" />
<img src="xxx.jpg" preview="2" preview-text="描述文字" />
<img src="xxx.jpg" preview="2" preview-text="描述文字" />
  • 添加对原插件 photoswipe 的事件响应,示例:
1
2
3
4
//close 只是众多事件名的其中一个,更多请查看文档
this.$preview.on('close',())=>{
console.log('图片查看器被关闭')
})
  • 添加图片查看器实例 this.$preview.self; 注意:此实例仅在图片查看器被打开时生效
1
2
3
4
this.$preview.on('imageLoadComplete', (e, item) => {
// 此时this.$preview.self 拥有原插件 photoswipe 文档中的所有方法和属性
console.log(this.$preview.self);
});
  • 本次更新后继承了原插件的所有事件、方法和属性,如需复杂使用请多多查看原插件文档

  • 应性能要求,新增大图查看 large 标签填写大图路径(插件的思路是 imgsrc 默认为缩略图),如不填写 large, 则展示 src

1
<img src="xxx.jpg" large="xxx_3x.jpg" preview="2" preview-text="描述文字" />
  • 如果图片是异步生成的,在图片数据更新后调用:
1
this.$previewRefresh();

总结

在移动端项目通常不会用到复杂的 api 我也粗略的过了一下, 根据个人的需求进行文档阅读

1
2
3
4
sync mounted () {
await this.$store.dispatch("getVoteList", this); // 获取图片列表
this.$previewRefresh() ; // 图片更新后使用图片查看器
}