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

- 日理万妓 2022-12-10 10:19 147阅读 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>

## ##