vue项目中的图片预览

2018-12-18

最近项目中需要是使用图片预览，推荐连个比较顺手的插件

vue-photo-preview

基于photoswipe的vue图片预览插件

使用方法
安装引入之后，在img标签上加上preview分组属性，即可使用

1 2	# 安装 npm install vue-photo-preview --save

# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
//或者
//var option={....} option配置请查看 http://photoswipe.com/documentation/options.html
//Vue.use(preview,option)

# html
//在img标签添加preview属性 preview值相同即表示为同一组
<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="描述文字">

vant 的ImagePreview

官方文档发链接

ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。

import { ImagePreview } from 'vant' // 引入

previewImg () {
    ImagePreview([
      'https://img.yzcdn.cn/1.jpg', // 图片地址
      'https://img.yzcdn.cn/2.jpg'
    ])
}