kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: ImageViewer组件优化

This commit is contained in:
kailong321200875 2023-06-25 17:37:58 +08:00
parent 49e415d277
commit 3b9c3d8b75
5 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ImageViewer/index.ts
View File

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

2
src/components/ImageViewer/src/ImageViewer.vue
View File

@ -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)
})

2
src/components/ImageViewer/src/types/index.ts
View File

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

128
src/router/index.ts
View File

@ -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',

12
src/views/Components/ImageViewer.vue
View File

@ -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'
]
})
}