share-fun-web/src/components/AdvanceViewImage.vue

<template>
  <viewer
    :images="items"
    :options="options"
    class="viewer"
    ref="viewer"
    @inited="inited"
    style="display: none"
  >
    <template slot-scope="scope">
      <img
        v-for="(item, i) in scope.images"
        :src="item.src"
        :key="i"
        :alt="item.alt"
      />
      {{ scope.options }}
    </template>
  </viewer>
</template>

<script>
export default {
  name: 'AdvanceViewImage',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      value: false,
      options: {
        zIndex: 9999,
        hidden: () => {
          this.$emit('input', false);
        }
      }
    };
  },
  mounted() {
    this.value = true;
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    showById(id, list) {
      let index = 0;
      this.items.forEach((x, i) => {
        if (x.id === id) {
          index = i;
        }
      });
      this.$viewer.view(index);
    },

    showByIndex(index) {
      this.$viewer.view(index);
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.showByIndex(this.index);
        } else {
          this.$emit('cancel');
        }
      }
    }
  }
};
</script>