pc-component-v5/examples/image-preview/src/ImagePreviewExample.vue

<template>
  <h1>图片预览</h1>
  <button class="btn btn-default" @click="preview">预览</button>
  <ImagePreview ref="imagePreview" />

  <h1>图片预览-自定义标题</h1>
  <button class="btn btn-default" @click="preview1">预览</button>
  <ImagePreview ref="imagePreview1">
    <template #default>
      美女，Hello
    </template>
  </ImagePreview>
</template>

<script>

import ImagePreview from '@/image-preview/index.js';

export default {

  components: {
    ImagePreview,
  },
  data: function () {
    return {
      
      // eslint-disable-next-line
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fent%2Ftransform%2F20161205%2FY3Kh-fxyipxf7613936.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649490096&t=fcae8a8f3a2b9b036708d353e3c5d073',
    };
  },

  methods: {
    preview: function(){
      this.$refs.imagePreview.previewImage(this.src);
    },
    preview1: function(){
      this.$refs.imagePreview1.previewImage(this.src);
    },
  },
};
</script>