Ant-Design-Vue-Pro图片点击预览 老版本通过引入 v-viewer 实现

官方 a-image 组件

组件文档：https://2x.antdv.com/components/image-cn

因为vue版本和antdv版本的关系，在 vue-antd-pro 3.0.2 的环境下（ant-design-vue@1.7.6、vue@2.6.0）无法直接使用，但我们可以选择第三方的组件（v-viewer）来实现类似的效果。当然，如果你使用的是最新版的 antdv，应该是可以直接使用官方组件的，但或许你在实际项目中 antdv 的版本已经锁定老版本，且不便升级，使用第三方预览组件是更好的选择。

引入 v-viewer@1.5.1

在 antdv 中引入 v-viewer（注意版本：1.5.1）
v-viewer：https://www.npmjs.com/package/v-viewer

1
yarn add v-viewer@1.5.1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
➜  antd-demo git:(main) yarn add v-viewer@1.5.1
yarn add v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ v-viewer@1.5.1
info All dependencies
├─ throttle-debounce@2.3.0
├─ v-viewer@1.5.1
└─ viewerjs@1.10.5
✨  Done in 6.96s.

在src/main.js中引入 v-viewer

1
2
3
4
5
6
// 图片预览 注意版本 1.5.1
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// 引入图片预览
Vue.use(Viewer, { name: 'v-viewer' })

文件中的位置参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ...
import './global.less' // global style

+ // 图片预览
+ import 'viewerjs/dist/viewer.css'
+ import Viewer from 'v-viewer'

Vue.config.productionTip = false

// mount axios to `Vue.$http` and `this.$http`
Vue.use(VueAxios)
+ // 引入图片预览
+ Vue.use(Viewer, { name: 'v-viewer' })
// ...

在页面中直接使用

1
2
3
<viewer v-viewer="{toolbar: false}">
  <img src="~@/assets/car.png" class="car-img" alt="car">
</viewer>

在 github antd-demo 中查看

GitHub 本次 Commit

软件版本：vue-antd-pro 3.0.2

  • “ant-design-vue”: “^1.7.6”
  • “vue”: “^2.6.0”,

参考资料