亲宝软件园·资讯

展开

vue-photo-preview图片预览失效

喜大普奔⁶⁶⁶ 人气:0

vue-photo-preview图片预览失效

<img
    class="pic"
    v-for="(item,index) of imgList"
    :key="index"
    :src="item.smallFileName"
    :large="item.fileName"
    preview="0"
    preview-text="症状图片"
>

imgList是异步获取数据的时候在获取数据后需要调用this.$previewRefresh();刷新重置一下,否则~~不生效

图片预览vue-photo-preview的使用

应用场景

点击图片,能够以类似朋友圈的方式展示图片,主要功能:预览,放大。

选择

经过网上一番查阅,有三款插件比较不错,分别是 viewerjs、vue-photo-preview 以及 vue-picture-preview。经过简单比较,viewerjs 功能比较强大,更适合web端。vue-picture-preview 只有预览和切换上下张功能,无法满足全部需求。故优先选择vue-photo-preview。

使用

1、安装

npm install vue-photo-preview --save

2、注册和配置

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
​
let options = {
  fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)

3、使用

<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">

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

注意

1、上面为简单使用,option其实还有更多可配置项,例如:

let options = {
  fullscreenEl: false, //控制是否显示右上角全屏按钮
  closeEl: false, //控制是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //控制是否显示分享按钮
  zoomEl: false, //控制是否显示放大缩小按钮
  counterEl: false, //控制是否显示左上角图片数量按钮
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true, //点击图片应关闭图库,仅当图像小于视口的大小时
  indexIndicatorSep: ' / '//图片数量的分隔符
}

更多option配置项,见:http://photoswipe.com/documentation/options.html

2、若img标签使用的是异步图片数据,需要在加载数据之后,加一句:

this.$previewRefresh();

这样刷新之后,vue-photo-preview预览效果才起效 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论