vue实现图片放大预览
下载,官网npm install vue-photo-preview --savemain.js引用import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'let options = {fullscreenEl: false, //控制是否显示右上角全屏按钮closeEl: false, //控制
·
下载 ,官网
npm install vue-photo-preview --save
main.js引用
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: false, //控制是否显示左上角图片数量按钮
arrowEl: true, //控制如图的左右箭头(pc浏览器模拟手机时)
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true //点击图片应关闭图库,仅当图像小于视口的大小时
};
Vue.use(preview, options)
使用,设置tapToClose这个属性为true可实现点击大图关闭预览。
<img src="xxx.jpg" preview="1">
https://www.cnblogs.com/jiangxiaobo/p/5695930.html
更多推荐
已为社区贡献5条内容
所有评论(0)