预览图片的组件,通过Pina进行操作

将子组件在全局进行一次引用

//例如在 app.vue中引用
<template>
  <imagePreview></imagePreview>
</template>
<script setup>
  import imagePreview from '@/components/ImagePreviewClick/index.vue'
</script>

子组件ImagePreviewClick.vue

<template>
  <div id="app" pageName="$route.name" v-if="showViewer">
    <!--图片预览-->
    <el-image-viewer style="z-index: 999999;"  @close="closeViewer" :url-list="showViewerImages"
      :initialIndex="initialIndex" />
  </div>
</template>
<script setup name="eleImageViewer">
import { ElImageViewer } from 'element-plus'
import previewImage from '@/store/modules/previewImage'
import { watch } from 'vue';
const showViewer = computed(() => previewImage().showViewer);
const showViewerImages = computed(() => previewImage().showViewerImages);
const initialIndex = ref(0)
watch(showViewer, (val) => {
  if (val) {
    document.body.style.overflow = 'hidden';
  }else{
    document.body.style.overflow = 'auto';
  }
})
// 预览
const createPreview = (arrUrl)=> {
  showViewerImages.value = arrUrl;
  showViewer.value = true
}
//关闭
const closeViewer = ()=> {
  previewImage().closeViewer()
  // showViewer.value = false;
  // showViewerImages.value = [];
}
defineExpose({ createPreview, closeViewer })
</script>

Pina: previewImage.js

const previewImage = defineStore(
  'previewImage',
  {
    state: () => ({
      showViewer: false,
      showViewerImages:[]
 
    }),
    actions: {
      createPreview(arrUrl) {
       this.showViewerImages = arrUrl
       this.showViewer = true    
      },
      closeViewer() {
        this.showViewer = false
        this.showViewerImages = []
      }
    }
  })

export default previewImage

父组件 index.vue

<script setup>
import previewImage from '@/store/modules/previewImage'
//预览图片
const url='图片地址'
previewImage().createPreview([url])
</script >