wordpress视频网站模板下载,万博法务网站建设项目,移动端网站优化,公司建设网站的服务费摘要#xff1a; vue项目开发中遇到一个图片预览的需求#xff0c;可以切换下一张#xff0c;就是花里胡哨的#xff0c;所以找viewer.js的插件 npm install v-viewer -S在项目main.js中加入#xff1a; Viewer.setDefaults用于更改默认配置#xff0c;比如我不想要显示… 摘要 vue项目开发中遇到一个图片预览的需求可以切换下一张就是花里胡哨的所以找viewer.js的插件 npm install v-viewer -S在项目main.js中加入 Viewer.setDefaults用于更改默认配置比如我不想要显示工具栏和title那么Viewer.setDefaults中我就设置toolbar: false和title: false那么预览时就不会显示工具栏了其他属性也可以这样设置。如果没有设置就是默认属性。
import Viewer from v-viewer
import viewerjs/dist/viewer.css
Vue.use(Viewer)
Viewer.setDefaults({// 需要配置的属性 注意属性并没有引号title: false,toolbar: false
})div classfilePagediv classfileTittle付款附件/divdiv classimgListviewer styledisplay: flex;justify-content: space-between;flex-wrap: wrap;img v-for(item,index) in imgList :keyindex :srcitem.src//viewer/div/divimgList:[{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 1},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 2},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 3},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 4},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 5},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 6},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 7},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 8},{src:require(../../../../assets/help/colorL.png),title: 图片1,preview: 9},],Viewer.js viewer.js中文文档
