安裝依賴包
npm install v-viewer --save
組件代碼imgShow.vue，實現了僅查看的功能

<template><div class="display-none"><viewer ref="viewer" :images="images" @inited="inited"><img width="100%" v-for="src in images" :src="src" :key="src" alt="" fit="scale-down" /></viewer></div> </template> <script> import 'viewerjs/dist/viewer.css'; import Viewer from 'v-viewer';export default {name: 'imgSelect',components: {Viewer},props: {images: {type: Array,default: () => []}},data: function() {return {dialogVisible: false};},created: function() {var vueObj = this;this.$on('show-dialog', function(dataList, afterSelect) {vueObj.$viewer.view(0);});},methods: {inited (viewer) {this.$viewer = viewer;},closeImgPreview() {this.dialogVisible = false;}} }; </script>

總結

以上是生活随笔為你收集整理的vue图片查看控件v-viewer使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。