vue点击图片放大预览图片支持旋转等

朱雀 2022-05-17 06:10 456阅读 0赞

## vue图片点击放大预览v-viewer库使用 ##

> aiprose 个人随笔上线，网址 [aiprose.com][] [点击访问][Link 1]

提到图片放大预览，可能好多人想到的是lightbox，在vue中使用lightbox还挺麻烦,但是伸手党做习惯了，所以去github上搜索了一个，感觉效果很完美，简单实用，所以推荐给大家。

[https://github.com/mirari/v-viewer][https_github.com_mirari_v-viewer] github地址，下面是我这块使用的效果图。

![效果图][70]

###### 1.安装配置 ######

npm install v-viewer --save

在main.js中引入

import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //Vue.use(Viewer) 默认配置写法 Vue.use(Viewer, { defaultOptions: { zIndex: 9999 } })

###### 2.使用 ######

<template> <viewer :images="images"> <img v-for="src in images" :src="src" :key="src" width="300"> </viewer> </template> <script type="text/ecmascript-6"> export default { name: "images", data() { return { images : [] } }, created() { //图片是从后台查的 this.getData() }, methods: { getData() { var _this = this _this.$http.get('/admin/attach/product') .then(function (response) { _this.images = response.data.data }) .catch(function (err) { console.log(err); }); } } } </script>

images 数组里的格式很简单，就是图片地址，没有多余的参数。

[
            "http://oss.tdcloud.trmap.cn/producephoto/1807181752/2c9180845e18bf9b015e19f1d3440010/别墅.jpg",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/201803190613566108.png",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/1248064370052.jpg",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311737/2c9180845e18bf9b015e19f1d3440010/201709260737493750.png"
        ]

## 关注 ##

> aiprose 个人随笔上线，网址 [aiprose.com][] [点击访问][Link 1]

如果有问题，请在下方评论，或者加群讨论 `128806068`

关注下方微信公众号，可以及时获取到各种技术的干货哦，如果你有想推荐的帖子，也可以联系我们的。

![这里写图片描述][70 1]

[aiprose.com]: http://aiprose.com
[Link 1]: https://www.aiprose.com/
[https_github.com_mirari_v-viewer]: https://github.com/mirari/v-viewer
[70]: /images/20220517/95967059d5664dcbbace4c3b253ae766.png
[70 1]: /images/20220517/9a54e82a1e244effb5ca551e2c9ba0ee.png