工作流表单+模型代码提交

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,
+    teleported = 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.teleported = teleported
+  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,35 @@
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'ImageViewer' })
+
+const props = defineProps({
+  urlList: {
+    type: Array as PropType<string[]>,
+    default: (): string[] => []
+  },
+  zIndex: propTypes.number.def(200),
+  initialIndex: propTypes.number.def(0),
+  infinite: propTypes.bool.def(true),
+  hideOnClickModal: propTypes.bool.def(false),
+  teleported: propTypes.bool.def(false),
+  show: propTypes.bool.def(false)
+})
+
+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/types.ts

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