feat: Add ImageViewer component and add ImageViewer demo

src/components/Dialog/src/Dialog.vue

@@ -63,6 +63,7 @@ const dialogStyle = computed(() => {
     :fullscreen="isFullscreen"
     destroy-on-close
     lock-scroll
+    draggable
     :close-on-click-modal="false"
   >
     <template #title>

src/components/ImageViewer/index.ts

@@ -0,0 +1,33 @@
+import ImageViewer from './src/ImageViewer.vue'
+import { isClient } from '@/utils/is'
+import { createVNode, render, VNode } from 'vue'
+import { ImageViewerProps } from './src/types'
+
+let instance: Nullable<VNode> = null
+
+export function createImageViewer(options: ImageViewerProps) {
+  if (!isClient) return
+  const {
+    urlList,
+    initialIndex = 0,
+    infinite = true,
+    hideOnClickModal = false,
+    appendToBody = false,
+    zIndex = 2000,
+    show = true
+  } = options
+
+  const propsData: Partial<ImageViewerProps> = {}
+  const container = document.createElement('div')
+  propsData.urlList = urlList
+  propsData.initialIndex = initialIndex
+  propsData.infinite = infinite
+  propsData.hideOnClickModal = hideOnClickModal
+  propsData.appendToBody = appendToBody
+  propsData.zIndex = zIndex
+  propsData.show = show
+
+  document.body.appendChild(container)
+  instance = createVNode(ImageViewer, propsData)
+  render(instance, container)
+}

src/components/ImageViewer/src/ImageViewer.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ElImageViewer } from 'element-plus'
+import { computed, ref } from 'vue'
+import { imageViewerProps } from './props'
+
+const props = defineProps(imageViewerProps)
+
+const getBindValue = computed(() => {
+  const propsData: Recordable = { ...props }
+  delete propsData.show
+  return propsData
+})
+
+const show = ref(props.show)
+
+const close = () => {
+  show.value = false
+}
+</script>
+
+<template>
+  <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" />
+</template>

src/components/ImageViewer/src/props.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue'
+
+export const imageViewerProps = {
+  urlList: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => []
+  },
+  zIndex: {
+    type: Number as PropType<number>,
+    default: 2000
+  },
+  initialIndex: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  infinite: {
+    type: Boolean as PropType<boolean>,
+    default: true
+  },
+  hideOnClickModal: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  appendToBody: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  show: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+}

src/components/ImageViewer/src/types.ts

@@ -0,0 +1,9 @@
+export interface ImageViewerProps {
+  urlList?: string[]
+  zIndex?: number
+  initialIndex?: number
+  infinite?: boolean
+  hideOnClickModal?: boolean
+  appendToBody?: boolean
+  show?: boolean
+}