From af9fc0a4aded3ec08746ddeaeabac4c3cfa9463d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=87=AF=E9=BE=99?= <502431556@qq.com>
Date: Fri, 11 Feb 2022 09:24:42 +0800
Subject: [PATCH] feat: Add ImageViewer component and add ImageViewer demo

---
 src/components/Dialog/src/Dialog.vue          |  1 +
 src/components/ImageViewer/index.ts           | 33 +++++++++++++++++++
 .../ImageViewer/src/ImageViewer.vue           | 23 +++++++++++++
 src/components/ImageViewer/src/props.ts       | 32 ++++++++++++++++++
 src/components/ImageViewer/src/types.ts       |  9 +++++
 src/locales/en.ts                             |  8 ++++-
 src/locales/zh-CN.ts                          |  8 ++++-
 src/router/index.ts                           |  8 +++++
 src/views/Components/ImageViewer.vue          | 30 +++++++++++++++++
 9 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ImageViewer/index.ts
 create mode 100644 src/components/ImageViewer/src/ImageViewer.vue
 create mode 100644 src/components/ImageViewer/src/props.ts
 create mode 100644 src/components/ImageViewer/src/types.ts
 create mode 100644 src/views/Components/ImageViewer.vue

diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 64cfd93..6db646e 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/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>
diff --git a/src/components/ImageViewer/index.ts b/src/components/ImageViewer/index.ts
new file mode 100644
index 0000000..3868135
--- /dev/null
+++ b/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)
+}
diff --git a/src/components/ImageViewer/src/ImageViewer.vue b/src/components/ImageViewer/src/ImageViewer.vue
new file mode 100644
index 0000000..b05f20c
--- /dev/null
+++ b/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>
diff --git a/src/components/ImageViewer/src/props.ts b/src/components/ImageViewer/src/props.ts
new file mode 100644
index 0000000..d7cfcca
--- /dev/null
+++ b/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
+  }
+}
diff --git a/src/components/ImageViewer/src/types.ts b/src/components/ImageViewer/src/types.ts
new file mode 100644
index 0000000..1932d74
--- /dev/null
+++ b/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
+}
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 9614384..6b2c313 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -105,7 +105,8 @@ export default {
     defaultTable: 'Basic example',
     editor: 'Editor',
     richText: 'Rich text',
-    dialog: 'Dialog'
+    dialog: 'Dialog',
+    imageViewer: 'Image viewer'
   },
   analysis: {
     newUser: 'New user',
@@ -343,5 +344,10 @@ export default {
     dialogDes: 'Secondary packaging of Dialog components based on ElementPlus',
     open: 'Open',
     close: 'Close'
+  },
+  imageViewerDemo: {
+    open: 'Open',
+    imageViewer: 'Image viewer',
+    imageViewerDes: 'Secondary packaging of ImageViewer components based on ElementPlus'
   }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 9fe92a2..3a7759c 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -105,7 +105,8 @@ export default {
     defaultTable: '基础示例',
     editor: '编辑器',
     richText: '富文本',
-    dialog: '弹窗'
+    dialog: '弹窗',
+    imageViewer: '图片预览'
   },
   analysis: {
     newUser: '新增用户',
@@ -340,5 +341,10 @@ export default {
     dialogDes: '基于 ElementPlus 的 Dialog 组件二次封装',
     open: '打开',
     close: '关闭'
+  },
+  imageViewerDemo: {
+    open: '打开',
+    imageViewer: '图片预览',
+    imageViewerDes: '基于 ElementPlus 的 ImageViewer 组件二次封装'
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 88fdb34..61be110 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -193,6 +193,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
           title: t('router.search')
         }
       },
+      {
+        path: 'image-viewer',
+        component: () => import('@/views/Components/ImageViewer.vue'),
+        name: 'ImageViewer',
+        meta: {
+          title: t('router.imageViewer')
+        }
+      },
       {
         path: 'dialog',
         component: () => import('@/views/Components/Dialog.vue'),
diff --git a/src/views/Components/ImageViewer.vue b/src/views/Components/ImageViewer.vue
new file mode 100644
index 0000000..d732a4e
--- /dev/null
+++ b/src/views/Components/ImageViewer.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ContentWrap } from '@/components/ContentWrap'
+import { createImageViewer } from '@/components/ImageViewer'
+import { ElButton } from 'element-plus'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const { t } = useI18n()
+
+const open = () => {
+  createImageViewer({
+    urlList: [
+      'https://img1.baidu.com/it/u=657828739,1486746195&fm=26&fmt=auto&gp=0.jpg',
+      'https://img0.baidu.com/it/u=3114228356,677481409&fm=26&fmt=auto&gp=0.jpg',
+      'https://img1.baidu.com/it/u=508846955,3814747122&fm=26&fmt=auto&gp=0.jpg',
+      'https://img1.baidu.com/it/u=3536647690,3616605490&fm=26&fmt=auto&gp=0.jpg',
+      'https://img1.baidu.com/it/u=4087287201,1148061266&fm=26&fmt=auto&gp=0.jpg',
+      'https://img2.baidu.com/it/u=3429163260,2974496379&fm=26&fmt=auto&gp=0.jpg'
+    ]
+  })
+}
+</script>
+
+<template>
+  <ContentWrap
+    :title="t('imageViewerDemo.imageViewer')"
+    :message="t('imageViewerDemo.imageViewerDes')"
+  >
+    <ElButton type="primary" @click="open">{{ t('imageViewerDemo.open') }}</ElButton>
+  </ContentWrap>
+</template>