先看下效果图:
点击图片就会进入预览,还包括图片名和原图大小、工具栏等。
首先需要安装 v-viewer
npm install v-viewer
然后在 main.js 中进行导入。
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer)
实例使用中,只需要用 viewer 包住图片即可。
<viewer> <img alt="a duck" src="../assets/duck.jpg"> </viewer>
如果想隐藏工具栏或图片名称等。
直接在引用时设置下默认配置。
下面 4 个配置分别是标题、工具栏、导航栏、关闭按钮,可以选择性隐藏。
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ title: false, toolbar: false, navbar: false, button: false })
都关闭后的效果图:
喜欢的点个赞❤吧!