vue图片点击放大预览v-viewer库使用
/mirari/v-viewergithub地址。
1.安装配置
npm install v-viewer --save
2.在main.js中引入
import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'//Vue.use(Viewer) 默认配置写法Vue.use(Viewer, {defaultOptions: {zIndex: 9999}})
3.在页面中使用
<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./producephoto/1807181752/2c9180845e18bf9b015e19f1d3440010/别墅.jpg","http://oss./producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/03190613566108.png","http://oss./producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/1248064370052.jpg","http://oss./producephoto/1807311737/2c9180845e18bf9b015e19f1d3440010/09260737493750.png"]
转载地址：/articles/635813
