vue图片查看控件v-viewer使用

最新推荐文章于 2024-08-08 08:28:50 发布

草宝虫

最新推荐文章于 2024-08-08 08:28:50 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签：图片查看

本文链接：https://blog.csdn.net/whq12789/article/details/108512000

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

安装依赖包
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>