perf: ImageViewer组件优化

src/components/ImageViewer/index.ts

@@ -12,7 +12,7 @@ export function createImageViewer(options: ImageViewerProps) {
     initialIndex = 0,
     infinite = true,
     hideOnClickModal = false,
-    appendToBody = false,
+    teleported = false,
     zIndex = 2000,
     show = true
   } = options
@@ -23,7 +23,7 @@ export function createImageViewer(options: ImageViewerProps) {
   propsData.initialIndex = initialIndex
   propsData.infinite = infinite
   propsData.hideOnClickModal = hideOnClickModal
-  propsData.appendToBody = appendToBody
+  propsData.teleported = teleported
   propsData.zIndex = zIndex
   propsData.show = show
 

src/components/ImageViewer/src/ImageViewer.vue

@@ -12,7 +12,7 @@ const props = defineProps({
   initialIndex: propTypes.number.def(0),
   infinite: propTypes.bool.def(true),
   hideOnClickModal: propTypes.bool.def(false),
-  appendToBody: propTypes.bool.def(false),
+  teleported: propTypes.bool.def(false),
   show: propTypes.bool.def(false)
 })
 

src/components/ImageViewer/src/types/index.ts

@@ -4,6 +4,6 @@ export interface ImageViewerProps {
   initialIndex?: number
   infinite?: boolean
   hideOnClickModal?: boolean
-  appendToBody?: boolean
+  teleported?: boolean
   show?: boolean
 }

src/router/index.ts

@@ -238,72 +238,72 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: t('router.imageViewer')
         }
+      },
+      {
+        path: 'dialog',
+        component: () => import('@/views/Components/Dialog.vue'),
+        name: 'Dialog',
+        meta: {
+          title: t('router.dialog')
+        }
+      },
+      {
+        path: 'icon',
+        component: () => import('@/views/Components/Icon.vue'),
+        name: 'Icon',
+        meta: {
+          title: t('router.icon')
+        }
+      },
+      {
+        path: 'echart',
+        component: () => import('@/views/Components/Echart.vue'),
+        name: 'Echart',
+        meta: {
+          title: t('router.echart')
+        }
+      },
+      {
+        path: 'count-to',
+        component: () => import('@/views/Components/CountTo.vue'),
+        name: 'CountTo',
+        meta: {
+          title: t('router.countTo')
+        }
+      },
+      {
+        path: 'qrcode',
+        component: () => import('@/views/Components/Qrcode.vue'),
+        name: 'Qrcode',
+        meta: {
+          title: t('router.qrcode')
+        }
+      },
+      {
+        path: 'highlight',
+        component: () => import('@/views/Components/Highlight.vue'),
+        name: 'Highlight',
+        meta: {
+          title: t('router.highlight')
+        }
+      },
+      {
+        path: 'infotip',
+        component: () => import('@/views/Components/Infotip.vue'),
+        name: 'Infotip',
+        meta: {
+          title: t('router.infotip')
+        }
+      },
+      {
+        path: 'input-password',
+        component: () => import('@/views/Components/InputPassword.vue'),
+        name: 'InputPassword',
+        meta: {
+          title: t('router.inputPassword')
+        }
       }
       // {
-      //   path: 'dialog',
-      //   component: () => import('@/views/Components/Dialog.vue'),
-      //   name: 'Dialog',
-      //   meta: {
-      //     title: t('router.dialog')
-      //   }
-      // },
-      // {
-      //   path: 'icon',
-      //   component: () => import('@/views/Components/Icon.vue'),
-      //   name: 'Icon',
-      //   meta: {
-      //     title: t('router.icon')
-      //   }
-      // },
-      // {
-      //   path: 'echart',
-      //   component: () => import('@/views/Components/Echart.vue'),
-      //   name: 'Echart',
-      //   meta: {
-      //     title: t('router.echart')
-      //   }
-      // },
-      // {
-      //   path: 'count-to',
-      //   component: () => import('@/views/Components/CountTo.vue'),
-      //   name: 'CountTo',
-      //   meta: {
-      //     title: t('router.countTo')
-      //   }
-      // },
-      // {
-      //   path: 'qrcode',
-      //   component: () => import('@/views/Components/Qrcode.vue'),
-      //   name: 'Qrcode',
-      //   meta: {
-      //     title: t('router.qrcode')
-      //   }
-      // },
-      // {
-      //   path: 'highlight',
-      //   component: () => import('@/views/Components/Highlight.vue'),
-      //   name: 'Highlight',
-      //   meta: {
-      //     title: t('router.highlight')
-      //   }
-      // },
-      // {
-      //   path: 'infotip',
-      //   component: () => import('@/views/Components/Infotip.vue'),
-      //   name: 'Infotip',
-      //   meta: {
-      //     title: t('router.infotip')
-      //   }
-      // },
-      // {
-      //   path: 'input-password',
-      //   component: () => import('@/views/Components/InputPassword.vue'),
-      //   name: 'InputPassword',
-      //   meta: {
-      //     title: t('router.inputPassword')
-      //   }
-      // },
-      // {
       //   path: 'sticky',
       //   component: () => import('@/views/Components/Sticky.vue'),
       //   name: 'Sticky',

src/views/Components/ImageViewer.vue

@@ -9,12 +9,12 @@ 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'
+      'https://images6.alphacoders.com/657/thumbbig-657194.webp',
+      'https://images3.alphacoders.com/677/thumbbig-677688.webp',
+      'https://images4.alphacoders.com/200/thumbbig-200966.webp',
+      'https://images5.alphacoders.com/657/thumbbig-657248.webp',
+      'https://images3.alphacoders.com/679/thumbbig-679917.webp',
+      'https://images3.alphacoders.com/737/thumbbig-73785.webp'
     ]
   })
 }