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">

vue实现移动端图片预览相关推荐

js实现移动端图片预览：手势缩放，手势拖动，双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
h5 img js 点击图片放大_H5实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
html5 双指缩放图片,js实现移动端图片预览：手势缩放，手势拖动，双击放大......
查看示例效果: 一.功能介绍图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
vue移动端图片预览组件
更新说明:1.02版本采用show属性值控制组件的显示与隐藏,不再使用v-if!! 安装:npm install -s w-previewimg 或 yarn add w-previewimg 在线预 ...
html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图
前提安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vu ...
vue实现移动端在线预览pdf
1.安装vue-pdf 命令:npm install --save vue-pdf 安装的版本为 2.代码块 <template><div class="pdf" ...
vue |实现点击图片预览浏览器满屏大图
安装插件 npm install vue-directive-image-previewer -D 在main.js 引入插件 import VueDirectiveImagePreviewer fr ...
pc 图片预览放大端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...

vue实现移动端图片预览

vue实现移动端图片预览

1.安装插件

2.main引入

3.使用

注意

扩展

vue实现移动端图片预览相关推荐

最新文章

热门文章