vue图片点击放大预览v-viewer库使用
提到图片放大预览,可能好多人想到的是lightbox,在vue中使用lightbox还挺麻烦,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美,简单实用,所以推荐给大家。
https://github.com/mirari/v-viewer github地址,下面是我这块使用的效果图。
![img_ff8d60a1938ed7d6010f8f8169dba889.png](https://i-blog.csdnimg.cn/blog_migrate/ad7f9c0cc59e602874e696ebff3e2c22.png)
20180807184134497.png
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"
]
关注
如果有问题,请在下方评论,或者加群讨论 128806068
关注下方微信公众号,可以及时获取到各种技术的干货哦,如果你有想推荐的帖子,也可以联系我们的。
![img_cb380af3d7a871d3f66df87a6eae835e.png](https://i-blog.csdnimg.cn/blog_migrate/cc49991b84a02ab81448ae8aa828acf4.png)