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

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

// MyImageViewer.vue

// 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

})