使用v-viewer点击图片预览的组件封装-蒲公英云

使用v-viewer点击图片预览的组件封装

- 日理万妓 2022-12-10 10:19 198阅读 0赞

1.下载v-viewer

npm install v-viewer -S

2.main.js中引入注册

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }

3.封装成组件

ImgPreview.vue

<template>
  <div>
    <viewer
      :options="options"
      :images="images"
      @inited="inited"
      class="viewer"
    >
      <template >
        <img v-for="src in images" :src="src" :key="src" class="images" />
      </template>
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer/src/component.vue'
  export default {
    components: {
      Viewer
    },
    props: {
        images: {
            type: Array,
            default: function () {
            return []
      }
        }
    },
    data () {
        return {
            options: {
                'navbar': false
            }
        }
    },
    created () {
      // console.log(this.images)
    },
    methods: {
    // 这个初始化会在页面初始的时候就执行一次，后续每次传入图片也会自动执行，所有用来转发事件
      inited (viewer) {
        this.$viewer = viewer
        this.$emit('getViewer', viewer)
      }
    }
  }
</script>
<style scoped>
.images{
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

父组件调用

<template>
  <div>
      <a-row>
        <a-col :span="24">
          <a-descriptions bordered>
            <a-descriptions-item
              label="图片"
              :span="3"
            >
              <ImgPreview :images="evaluateUrls" @getViewer="getViewer"></ImgPreview>
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
  </div>
</template>
<script>
import ImgPreview from './ImgPreview.vue'
export default {
  name: 'ResidentDetails',
  components: {
    ImgPreview
  },
  data () {
    return {
     viewer: '',
     evaluateUrls: []//获取需要的图片数据
    }
  },
  methods: {
     getViewer (viewer) {
        if (this.viewer) {
            this.$nextTick(() => {
                viewer.show()
            })
        } else { // 先定义这个变量为空，防止第一次页面加载的时候就出现遮罩层
            this.viewer = viewer
        }
    }
  }
}
</script>
<style lang='less' scoped>
</style>