vue中图片预览(v-viewer库使用)

效果图:   注释: 可拖拽,可放大缩小旋转,全屏,功能齐全,底部有操作按钮

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 } })

代码:

<viewer :images="previewImages"> <img v-for="src in previewImages" :src="src" :key="src" width="200"> </viewer>

 

data () { return { previewImages : [] } }, created() { //图片是从后台 (网络图片) this.getData() }, methods: { getData() { var _this = this _this.$http.get('/admin/attach/product') .then(function (response) { _this.previewImages= response.data 　　　　　　　　.catch(function (err) { 　　　　　　　　　　console.log(err)　　　　　　　　}); 　　　　} 　　　}

 参考链接:https://www.jianshu.com/p/2c63a556b5cb

 

转载于:https://www.cnblogs.com/520BigBear/p/11213646.html