diff --git a/src/components/ImageViewer/index.ts b/src/components/ImageViewer/index.ts index 3868135..35764d6 100644 --- a/src/components/ImageViewer/index.ts +++ b/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 diff --git a/src/components/ImageViewer/src/ImageViewer.vue b/src/components/ImageViewer/src/ImageViewer.vue index 02fdb00..b9afe17 100644 --- a/src/components/ImageViewer/src/ImageViewer.vue +++ b/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) }) diff --git a/src/components/ImageViewer/src/types/index.ts b/src/components/ImageViewer/src/types/index.ts index 1932d74..2fff4c0 100644 --- a/src/components/ImageViewer/src/types/index.ts +++ b/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 } diff --git a/src/router/index.ts b/src/router/index.ts index ab10e04..ad611d7 100644 --- a/src/router/index.ts +++ b/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', diff --git a/src/views/Components/ImageViewer.vue b/src/views/Components/ImageViewer.vue index d732a4e..374ca71 100644 --- a/src/views/Components/ImageViewer.vue +++ b/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' ] }) }