网站全站模板,交易所网站开发实战,东莞住建局官网查询,制作企业网站是免费的吗使用V-View点击图片进行预览#xff1a;
npm install v-viewer --save
在main.js进行引入
在图片下方会有 轮播箭头下一张上一张等#xff0c;因此要用配置来关闭。
import Viewer from v-viewer // viewer.js一种图片预览处理工具
import viewerjs/dist/viewer.css …使用V-View点击图片进行预览
npm install v-viewer --save
在main.js进行引入
在图片下方会有 轮播箭头下一张上一张等因此要用配置来关闭。
import Viewer from v-viewer // viewer.js一种图片预览处理工具
import viewerjs/dist/viewer.css
Vue.use(Viewer, {defaultOptions: {zIndex: 9999,inline: false, // 启用 inline 模式button: true, // 显示右上角关闭按钮navbar: true, // 显示缩略图导航 title: false // 显示当前图片的标题}
})使用方法
这里是因为我的需求是直接点击图片触发因此需要隐藏。 el-imagestylemargin-bottom: 40px:srcstepSixclicktpDialogOpen(stepSix)/el-imagetpDialogOpen会将图片地址传给v-view viewer :images[srcPrew]img idmyPrew :srcsrcPrew stylewidth: 100% v-showhidden //viewer
