component.vue

<template>
  <div>
    <slot :images="images" :options="option">
    </slot>
  </div>
</template>
<script>
import Viewer from 'viewerjs'

export default {
    data() {
        return {
            option: {}
        }
    },
    created() {
        this.init()
    },
      props: {
        images: {
          type: Array,
        },
        rebuild: {
          type: Boolean,
          default: false,
        },
        trigger: {},
        options: {
          type: Object,
        },
      },

      computed: {
        // option2(){
        //     return this.option
        // }
      },

      watch: {
        images() {
          this.$nextTick(() => {
            this.onChange()
          })
        },
        trigger: {
          handler() {
            this.$nextTick(() => {
              this.onChange()
            })
          },
          deep: true,
        },
        options: {
          handler() {
            this.$nextTick(() => {
              this.rebuildViewer()
            })
          },
          deep: true,
        },
      },

      mounted() {
        this.createViewer()
      },

      unmounted() {
        this.destroyViewer()
      },

      methods: {
        init() {
           Object.assign(this.option, this.options)
           Object.assign(this.option, {show: this.show})
        },
          show() {
              let container = document.getElementsByClassName('viewer-container')[0]
              let reg = /.+({.+}).+/
              let viewBigBtn = document.createElement('div')
              viewBigBtn.innerText = '查看大图'
              viewBigBtn.className = 'xnwBtn viewBig'
              viewBigBtn.addEventListener('click', _ => {
                  let url = window.decodeURIComponent(container.getElementsByClassName('viewer-canvas')[0].getElementsByTagName('img')[0].src)
                  let fileid = url.match(reg)[1]
                  let bigUrl = `//cdn.xnwimg.com/down/${fileid}/1.jpg`
                  window.open(bigUrl, '_blank')
              })
              container.appendChild(viewBigBtn)

              if (this.options && this.options.correct) {
                  let correctBtn = document.createElement('div')
                  correctBtn.innerText = '批注'
                  correctBtn.className = 'xnwBtn correct'
                  correctBtn.addEventListener('click', _ => {
                      let url = window.decodeURIComponent(container.getElementsByClassName('viewer-canvas')[0].getElementsByTagName('img')[0].src)
                      let fileid = url.match(reg)[1]
                      this.$emit('correct', fileid)
                      this.rebuildViewer()
                  })
                  container.appendChild(correctBtn)
              }
          },
        onChange() {
          if (this.rebuild) {
            this.rebuildViewer()
          }
          else {
            this.updateViewer()
          }
        },
        rebuildViewer() {
          this.destroyViewer()
          this.createViewer()
        },
        updateViewer() {
          if (this.$viewer) {
            this.$viewer.update()
            this.$emit('inited', this.$viewer)
          }
          else {
            this.createViewer()
          }
        },
        destroyViewer() {
          this.$viewer && this.$viewer.destroy()
        },
        createViewer() {
            this.init()
          this.$viewer = new Viewer(this.$el, this.option)
          this.$emit('inited', this.$viewer)
        },
      },
}
</script>
<style lang="scss">
.viewer-container {
    .xnwBtn {
        background-color: orange;
        border-radius: 2px;
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        color: white;
        font-size: 14px;
        overflow: hidden;
        position: absolute;
        right: 100px;
        top: 40px;
        padding: 0 7px;
        transition: background-color 0.15s;
        &.viewBig {
            right: 100px;
        }
        &.correct {
            right: 200px;
        }
        &:hover {
          opacity: .9;
        }
    }
}


</style>