vue3 element-plus 图片预览二次封装 全局函数式调用

由于官方没有提供全局使用的图片预览方法，所以进行一下封装方便使用

// MyImageViewer.vue
<template>
  <el-image-viewer
    v-if="isShow"
    :urlList="urlList"
    :zIndex="options.zIndex"
    :initialIndex="options.initialIndex"
    :infinite="options.infinite"
    :hideOnClickModal="options.hideOnClickModal"
    @close="close" />
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { ElImageViewer} from 'element-plus'
export default defineComponent({
  name: 'MyimageViewer',
  components: {
    ElImageViewer
  },
  setup () {
    let urlList = []
    let isShow = ref(false)
    let options = reactive({
      zIndex: 2000,
      initialIndex: 0,
      infinite: true,
      hideOnClickModal: false,
    })

    const close = () => {
      isShow.value = false
    }

    return {
      urlList,
      options,
      isShow,
      close
    }
  }
})
</script>

<style scoped>

</style>

// index.ts
import { createApp, ComponentPublicInstance } from 'vue'
import MyImageViewer from './MyImageViewer.vue'
type option = {
  zIndex: number,
  initialIndex: boolean
  infinite: boolean
  hideOnClickModal: boolean
}
interface Vm extends ComponentPublicInstance {
  urlList: string[] | string
  options: option
  isShow: boolean
}
const app = createApp(MyImageViewer)
const divEl = document.createElement('div')
const vm = app.mount(divEl) as Vm
document.body.appendChild(divEl)
export const ImagePreview = (urls, options?: option) => {
  let imageArray = []
  if (typeof urls === 'string') imageArray = Object.assign([], [urls])
  if (urls instanceof Array) imageArray = Object.assign([], urls)
  console.log(imageArray)
  vm.urlList = imageArray
  if (Object.keys(options).length) {
    for (const key in options) {
      if (Object.prototype.hasOwnProperty.call(options, key)) {
        const element = options[key];
        vm.options[key] = element
      }
    }
  }
  vm.isShow = true
}

全局注册：app.config.globalProperties.$imgPreview = ImagePreview

使用：

$imgPreview(urls, {

        zIndex: 1000,

        initialIndex: 0,

        infinite: true,

        hideOnClickModal: false

})