vue实现移动端图片预览

• • 1.安装插件
  • 2.main引入
  • 3.使用
  • 注意
  • 扩展

通过使用vue-photo-preview插件，实现移动端图片的预览，全屏等功能。

1.安装插件

npm install vue-photo-preview --save
           

2.main引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
           

3.使用

//加上preview="1"即可，preview值相同为同组图片
<img src="xxx.jpg"  preview="1" preview-text="图片描述">
           

注意

1.如果图片是异步获取，在加载完数据后进行刷新

this.$nextTick(()=>{
    this.$previewRefresh()
  })
           

2.一个屏幕中有多个图片预览，类似于拍照功能，当有一个没有图片，但是也加了preview=“1” ，会出现另一个也预览不了的情况。解决方案就是对preview=“1” 进行区分，这样就不会互相影响

例如：

<img src="1.jpg"  preview="1" preview-text="图片描述1">
<img src="2.jpg"  preview="2" preview-text="图片描述2">
<img src="3.jpg"  preview="3" preview-text="描述描述3">
           

3.preview值相同为同组图片。preview-text为预览时下方描述文字。 img的src默认为缩略图，如不填写large，则展示src。若有large，则显示large大图。

扩展

1.如果想修改插件，option有很多配置项，在main.js就可以配置

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  arrowEl: true,  //控制如图的左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
};
 
import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  import Vue from 'vue'
Vue.use(preview,option)


           

2.图片相应事件

mounted () {
    this.init() 
  },
  
methods: {
    int(){
		this.$preview.on('close',())=>{//close只是众多事件名的其中一个，更多请查看文档
		    console.log('图片查看器被关闭')
		})
		// 添加图片查看器实例--this.$preview.self 注意：此实例仅在图片查看器被打开时生效
		this.$preview.on('imageLoadComplete',(e,item)=>{
		    console.log(this.$preview.self)  //此时this.$preview.self拥有原插件photoswipe文档中的所有方法和属性
		})
	}
}


           

3.缩略图和高清图

//如果遇到的需求有缩略图和高清图两种，就需要有两个地址存放图片
//src：存放缩略图
//large:存放高清图
<img src="1.jpg" large="GQ1.jpg" preview="1" preview-text="图片描述1">