先看下效果图: 点击图片就会进入预览,还包括图片名和原图大小、工具栏等。
首先需要安装 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
})
都关闭后的效果图: