From 45782eb90aa9eec444dc8619d22515e31e5d586e Mon Sep 17 00:00:00 2001 From: devin Date: Mon, 20 Mar 2023 23:54:36 +0800 Subject: [PATCH 1/6] version 0.7 --- packages/opendesign/package.json | 2 +- packages/scripts/src/gen-icons/index.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/opendesign/package.json b/packages/opendesign/package.json index c07a7064..09f53d01 100644 --- a/packages/opendesign/package.json +++ b/packages/opendesign/package.json @@ -20,7 +20,7 @@ "gen:icon": "opensig-scripts gen:icon --config ./src/icons/icon.config.ts", "build:component": "opensig-scripts build:component", "build:style": "opensig-scripts build:style", - "build": "opensig-scripts gen:icon && opensig-scripts build:component && opensig-scripts build:style" + "build": "pnpm gen:icon && pnpm build:component && pnpm build:style" }, "peerDependencies": { "vue": "^3.1.0" diff --git a/packages/scripts/src/gen-icons/index.ts b/packages/scripts/src/gen-icons/index.ts index f1794bc7..90e8caab 100644 --- a/packages/scripts/src/gen-icons/index.ts +++ b/packages/scripts/src/gen-icons/index.ts @@ -20,7 +20,7 @@ export interface TokenConfigT { */ async function readConfig(cfg: string) { const base = process.cwd(); - const configFile = path.resolve(base, cfg || './icons.config.ts'); + const configFile = path.resolve(base, cfg || './icon.config.ts'); const cfgDir = path.dirname(configFile); const configData: IconsConfig = await require(configFile); -- Gitee From 00dab1f763e2e6b45bc6caffbffc5e1c0575fff8 Mon Sep 17 00:00:00 2001 From: devin Date: Tue, 21 Mar 2023 09:54:17 +0800 Subject: [PATCH 2/6] fix v style --- .../src/components/checkbox-group/style/index.scss | 2 +- .../opendesign/src/components/divider/style/index.scss | 8 ++++---- packages/opendesign/src/components/divider/style/var.scss | 2 +- .../src/components/radio-group/style/index.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/opendesign/src/components/checkbox-group/style/index.scss b/packages/opendesign/src/components/checkbox-group/style/index.scss index 80be7f6a..59ba2eae 100644 --- a/packages/opendesign/src/components/checkbox-group/style/index.scss +++ b/packages/opendesign/src/components/checkbox-group/style/index.scss @@ -6,6 +6,6 @@ gap: var(--checkbox-group-gap); } -.o-checkbox-group-direction-vertical { +.o-checkbox-group-direction-v { flex-direction: column; } diff --git a/packages/opendesign/src/components/divider/style/index.scss b/packages/opendesign/src/components/divider/style/index.scss index 1a5e334e..d4a0eaac 100644 --- a/packages/opendesign/src/components/divider/style/index.scss +++ b/packages/opendesign/src/components/divider/style/index.scss @@ -42,7 +42,7 @@ } } -.o-divider-vertical { +.o-divider-v { display: inline-block; width: 1px; height: 1em; @@ -53,21 +53,21 @@ } .o-divider-solid { - &.o-divider-vertical, + &.o-divider-v, .o-divider-line { border-style: solid; } } .o-divider-dashed { - &.o-divider-vertical, + &.o-divider-v, .o-divider-line { border-style: dashed; } } .o-divider-dotted { - &.o-divider-vertical, + &.o-divider-v, .o-divider-line { border-style: dotted; } diff --git a/packages/opendesign/src/components/divider/style/var.scss b/packages/opendesign/src/components/divider/style/var.scss index c15c6f69..17ab3cf5 100644 --- a/packages/opendesign/src/components/divider/style/var.scss +++ b/packages/opendesign/src/components/divider/style/var.scss @@ -11,6 +11,6 @@ --o-divider-gap: var(--o-gap-3); } -.o-divider-vertical { +.o-divider-v { --o-divider-gap: var(--o-gap-3); } diff --git a/packages/opendesign/src/components/radio-group/style/index.scss b/packages/opendesign/src/components/radio-group/style/index.scss index 383b4dfc..e4ec1f55 100644 --- a/packages/opendesign/src/components/radio-group/style/index.scss +++ b/packages/opendesign/src/components/radio-group/style/index.scss @@ -6,6 +6,6 @@ gap: var(--radio-group-gap); } -.o-radio-group-direction-vertical { +.o-radio-group-direction-v { flex-direction: column; } -- Gitee From b7001e198d2aac79a451031e9988234452539ae2 Mon Sep 17 00:00:00 2001 From: devin Date: Tue, 21 Mar 2023 20:22:39 +0800 Subject: [PATCH 3/6] =?UTF-8?q?figure=E6=B7=BB=E5=8A=A0colorfull=E5=AD=97?= =?UTF-8?q?=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/opendesign/src/components/figure/OFigure.vue | 3 ++- .../opendesign/src/components/figure/style/index.scss | 4 +++- packages/opendesign/src/components/figure/types.ts | 8 +++++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue index 4d563d67..d6b0e3ab 100644 --- a/packages/opendesign/src/components/figure/OFigure.vue +++ b/packages/opendesign/src/components/figure/OFigure.vue @@ -12,7 +12,7 @@ const imgRef = ref(null); const isLoading = ref(true); const isError = ref(false); -const prestColor = PrestColorPool.pick(); +const prestColor = props.colorfull ? PrestColorPool.pick() : ''; const bgSrc = computed(() => { if (props.background && props.ratio) { @@ -68,6 +68,7 @@ onMounted(() => { :class="{ 'is-loading': isLoading, 'is-error': isError, + 'is-colorfull': props.colorfull, 'o-figure-hoverable': props.hoverable || !!props.href, }" :style="{ diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss index 9ad28847..cd468e42 100644 --- a/packages/opendesign/src/components/figure/style/index.scss +++ b/packages/opendesign/src/components/figure/style/index.scss @@ -6,7 +6,9 @@ overflow: hidden; transition: background-color var(--o-duration-m2); &.is-loading { - background-color: var(--figure-prest-color); + &.is-colorfull { + background-color: var(--figure-prest-color); + } img { opacity: 0; } diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts index 9a564244..dde3eee1 100644 --- a/packages/opendesign/src/components/figure/types.ts +++ b/packages/opendesign/src/components/figure/types.ts @@ -50,7 +50,13 @@ export const figureProps = { */ href: { type: String, - } + }, + /** + * 预置随机多彩背景 + */ + colorfull: { + type: Boolean, + }, }; export type FigurePropsT = ExtractPropTypes; -- Gitee From 11810e78e5d2c5c8bd9e911a3a3e0b8fe48c6bb6 Mon Sep 17 00:00:00 2001 From: devin Date: Tue, 21 Mar 2023 20:22:49 +0800 Subject: [PATCH 4/6] =?UTF-8?q?card=E6=8F=92=E6=A7=BD=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../opendesign/src/components/card/OCard.vue | 60 ++++++++++--------- .../components/card/__demo__/CardBasic.vue | 17 +++--- .../src/components/card/style/index.scss | 3 + 3 files changed, 44 insertions(+), 36 deletions(-) diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue index 5013452c..081e4be0 100644 --- a/packages/opendesign/src/components/card/OCard.vue +++ b/packages/opendesign/src/components/card/OCard.vue @@ -28,36 +28,38 @@ const hasContent = computed(() => { '--card-detail-max-row': props.detailMaxRow, }" > -
- - - -
-
- -
-
- {{ props.title }} + +
+ + + +
+
+ +
+
+ {{ props.title }} +
+
+
{{ props.content }}
+ +
-
-
{{ props.content }}
- +
+
-
-
- -
- -
+ +
+ diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue index 26869dc2..80731afe 100644 --- a/packages/opendesign/src/components/card/__demo__/CardBasic.vue +++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue @@ -75,14 +75,17 @@ const card = {
- -
-
-
-
{{ card.title }}
-
{{ card.content }}
+ +
diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss index e670142c..883b66f1 100644 --- a/packages/opendesign/src/components/card/style/index.scss +++ b/packages/opendesign/src/components/card/style/index.scss @@ -46,6 +46,9 @@ display: flex; flex-direction: column; justify-content: space-between; + &:first-child { + height: 100%; + } } .o-card-content { -- Gitee From b15d6325f48868690a78520e9231f09362c7e1f4 Mon Sep 17 00:00:00 2001 From: devin Date: Tue, 21 Mar 2023 23:30:37 +0800 Subject: [PATCH 5/6] add slides --- .../src/components/figure/style/index.scss | 1 + packages/opendesign/src/components/index.scss | 1 + packages/opendesign/src/components/index.ts | 1 + .../src/components/slides/OSlideItem.vue | 6 + .../src/components/slides/OSlides.vue | 156 ++++++++++++++++++ .../slides/__demo__/IndexSlides.vue | 10 ++ .../slides/__demo__/SlidesBasic.vue | 30 ++++ .../opendesign/src/components/slides/index.ts | 15 ++ .../src/components/slides/provide.ts | 10 ++ .../src/components/slides/style/index.scss | 133 +++++++++++++++ .../src/components/slides/style/index.ts | 2 + .../src/components/slides/style/var.scss | 5 + .../opendesign/src/components/slides/types.ts | 13 ++ packages/portal/src/router.ts | 6 + 14 files changed, 389 insertions(+) create mode 100644 packages/opendesign/src/components/slides/OSlideItem.vue create mode 100644 packages/opendesign/src/components/slides/OSlides.vue create mode 100644 packages/opendesign/src/components/slides/__demo__/IndexSlides.vue create mode 100644 packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue create mode 100644 packages/opendesign/src/components/slides/index.ts create mode 100644 packages/opendesign/src/components/slides/provide.ts create mode 100644 packages/opendesign/src/components/slides/style/index.scss create mode 100644 packages/opendesign/src/components/slides/style/index.ts create mode 100644 packages/opendesign/src/components/slides/style/var.scss create mode 100644 packages/opendesign/src/components/slides/types.ts diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss index cd468e42..956933f2 100644 --- a/packages/opendesign/src/components/figure/style/index.scss +++ b/packages/opendesign/src/components/figure/style/index.scss @@ -14,6 +14,7 @@ } } img { + max-width: 100%; vertical-align: top; opacity: 1; transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) var(--o-duration-m2); diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss index 658e74d3..3d2a8ae1 100644 --- a/packages/opendesign/src/components/index.scss +++ b/packages/opendesign/src/components/index.scss @@ -29,3 +29,4 @@ @use './dialog/style/index.scss' as *; @use './figure/style/index.scss' as *; @use './card/style/index.scss' as *; +@use './slides/style/index.scss' as *; diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts index ed6a810d..52a3c2b5 100644 --- a/packages/opendesign/src/components/index.ts +++ b/packages/opendesign/src/components/index.ts @@ -33,6 +33,7 @@ export * from './dialog'; export * from './figure'; export * from './card'; export * from './message'; +export * from './slides'; // export * from './scrollbar'; diff --git a/packages/opendesign/src/components/slides/OSlideItem.vue b/packages/opendesign/src/components/slides/OSlideItem.vue new file mode 100644 index 00000000..d4a66295 --- /dev/null +++ b/packages/opendesign/src/components/slides/OSlideItem.vue @@ -0,0 +1,6 @@ + + diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue new file mode 100644 index 00000000..d20bfe18 --- /dev/null +++ b/packages/opendesign/src/components/slides/OSlides.vue @@ -0,0 +1,156 @@ + + diff --git a/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue new file mode 100644 index 00000000..32827936 --- /dev/null +++ b/packages/opendesign/src/components/slides/__demo__/IndexSlides.vue @@ -0,0 +1,10 @@ + + + diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue new file mode 100644 index 00000000..7ab45b36 --- /dev/null +++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue @@ -0,0 +1,30 @@ + + + diff --git a/packages/opendesign/src/components/slides/index.ts b/packages/opendesign/src/components/slides/index.ts new file mode 100644 index 00000000..437e9441 --- /dev/null +++ b/packages/opendesign/src/components/slides/index.ts @@ -0,0 +1,15 @@ +import _OSlides from './OSlides.vue'; +import OSlideItem from './OSlideItem.vue'; +import type { App } from 'vue'; + +const OSlides = Object.assign(_OSlides, { + OSlideItem, + install(app: App) { + app.component(_OSlides.name, _OSlides); + }, +}); + +export { + OSlides, + OSlideItem +}; diff --git a/packages/opendesign/src/components/slides/provide.ts b/packages/opendesign/src/components/slides/provide.ts new file mode 100644 index 00000000..e70f164f --- /dev/null +++ b/packages/opendesign/src/components/slides/provide.ts @@ -0,0 +1,10 @@ +import { InjectionKey, Ref } from 'vue'; + + +export const slidesInjectKey: InjectionKey<{ + currentIndex: Ref + // Ref: Ref, + // updateValue: (value: string | number, navEl: HTMLElement | null) => void, + // onDeletePane: (value: string | number, evt: MouseEvent) => void, +}> = Symbol('provide-slides'); + diff --git a/packages/opendesign/src/components/slides/style/index.scss b/packages/opendesign/src/components/slides/style/index.scss new file mode 100644 index 00000000..0a601811 --- /dev/null +++ b/packages/opendesign/src/components/slides/style/index.scss @@ -0,0 +1,133 @@ +@use './var.scss'; + +.o-slides { + position: relative; +} + +.o-slides-wrap { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + overflow: hidden; +} +.o-slide-item { + position: absolute; + left: 0; + right: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; + opacity: 0; +} + +.o-slide-item-active { + z-index: 5; + opacity: 1; +} + +.o-slides-arrow-prev, +.o-slides-arrow-next { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + user-select: none; + cursor: pointer; +} +.o-slides-arrow-prev { + top: 50%; + left: 12px; + transform: translate3d(0, -50%, 0); +} +.o-slides-arrow-next { + top: 50%; + right: 12px; + transform: translate3d(0, -50%, 0); +} +.o-slides-arrow-icon { + font-size: 48px; + color: var(--o-color-control-light); + background-color: rgba(var(--o-gray-1), 0.3); + border-radius: 50%; + opacity: 0.6; + &:hover { + opacity: 1; + } +} + +.o-slides-indicator-wrap { + position: absolute; + left: 0; + bottom: 12px; + display: flex; + justify-content: center; + z-index: 2; + left: 50%; + transform: translate3d(-50%, 0, 0); +} +.o-slides-indicator-dot { + width: 20px; + height: 4px; + background-color: var(--o-color-control-light); + margin: 4px; + border-radius: 4px; + opacity: 0.3; +} +.o-slides-indicator-dot-active { + opacity: 1; +} + +.o-slide-item-in { + opacity: 1; + animation: slides-slide-x-in var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-out { + z-index: 3; + opacity: 1; + animation: slides-slide-x-out var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-in-reverse { + opacity: 1; + animation: slides-slide-x-in-reverse var(--o-duration-l) var(--o-easing-standard-in); +} +.o-slide-item-out-reverse { + opacity: 1; + z-index: 3; + animation: slides-slide-x-out-reverse var(--o-duration-l) var(--o-easing-standard-in); +} + +@keyframes slides-slide-x-in { + 0% { + transform: translate3d(100%, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes slides-slide-x-in-reverse { + 0% { + transform: translate3d(-100%, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes slides-slide-x-out { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(-100%, 0, 0); + } +} +@keyframes slides-slide-x-out-reverse { + 0% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(100%, 0, 0); + } +} diff --git a/packages/opendesign/src/components/slides/style/index.ts b/packages/opendesign/src/components/slides/style/index.ts new file mode 100644 index 00000000..591b2fbd --- /dev/null +++ b/packages/opendesign/src/components/slides/style/index.ts @@ -0,0 +1,2 @@ +import '../../style'; +import './index.scss'; diff --git a/packages/opendesign/src/components/slides/style/var.scss b/packages/opendesign/src/components/slides/style/var.scss new file mode 100644 index 00000000..1f49819f --- /dev/null +++ b/packages/opendesign/src/components/slides/style/var.scss @@ -0,0 +1,5 @@ +.o-figure { + --figure-padding-top: 50%; + --figure-fit: 'cover'; + --figure-position: 'center'; +} diff --git a/packages/opendesign/src/components/slides/types.ts b/packages/opendesign/src/components/slides/types.ts new file mode 100644 index 00000000..684401be --- /dev/null +++ b/packages/opendesign/src/components/slides/types.ts @@ -0,0 +1,13 @@ +import { ExtractPropTypes } from 'vue'; + +export const slidesProps = { + /** + * 激活索引 + */ + activeIndex: { + type: Number, + }, + +}; + +export type SlidesPropsT = ExtractPropTypes; diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts index 4848a27a..7f7ad111 100644 --- a/packages/portal/src/router.ts +++ b/packages/portal/src/router.ts @@ -176,6 +176,12 @@ export const routes = [ label: '消息提示', component: () => import('@components/message/__demo__/IndexMessage.vue'), }, + { + path: '/slides', + name: 'Slides', + label: '幻灯片 Slides', + component: () => import('@components/slides/__demo__/IndexSlides.vue'), + }, { path: '/resize-observer', name: 'ResizeObserver', -- Gitee From 7f12e63e1f708f3b8ad5d443ba9b3a20b14f8e0a Mon Sep 17 00:00:00 2001 From: devin Date: Wed, 22 Mar 2023 17:56:13 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0slides?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/_shared/global.ts | 2 - .../opendesign/src/components/card/OCard.vue | 4 +- .../components/card/__demo__/CardBasic.vue | 20 +++ .../src/components/card/style/index.scss | 13 +- .../src/components/input/style/index.scss | 4 +- .../src/components/input/style/var.scss | 2 +- .../src/components/slides/OSlides.vue | 157 +++++++++++++----- .../slides/__demo__/SlidesBasic.vue | 27 ++- .../src/components/slides/style/index.scss | 70 +++++--- .../opendesign/src/components/slides/types.ts | 23 ++- 10 files changed, 241 insertions(+), 81 deletions(-) diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts index bc88dd0f..8be32c05 100644 --- a/packages/opendesign/src/components/_shared/global.ts +++ b/packages/opendesign/src/components/_shared/global.ts @@ -14,8 +14,6 @@ export const defaultRound = ref<'pill' | 'normal'>('normal'); export function initRound(type: 'pill' | 'normal') { defaultRound.value = type; } -// TODO 全局变量增加 o-radius-control-s o-radius-control-m o-radius-control-l - // 方向 export type DirectionT = 'h' | 'v'; diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue index 081e4be0..6c8ae155 100644 --- a/packages/opendesign/src/components/card/OCard.vue +++ b/packages/opendesign/src/components/card/OCard.vue @@ -55,8 +55,8 @@ const hasContent = computed(() => {
-
- +
+
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue index 80731afe..2ef7ed16 100644 --- a/packages/opendesign/src/components/card/__demo__/CardBasic.vue +++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue @@ -38,6 +38,26 @@ const card = {
+ + +
-import { ref, reactive, watch, computed, onMounted, provide } from 'vue'; +import { ref, watch, computed, onMounted, onUnmounted } from 'vue'; import { IconChevronLeft, IconChevronRight } from '../icons'; import { slidesProps } from './types'; const props = defineProps(slidesProps); -// const emits = defineEmits<{ (e: 'error'): void }>(); +const emits = defineEmits<{ (e: 'change', now: number, last: number): void }>(); const activeIndex = ref(props.activeIndex || 0); watch( @@ -18,6 +18,7 @@ watch( enum ClassNames { ACTIVE = 'o-slide-item-active', + ANIMATING = 'o-slide-item-animating', ACTIVE_IN = 'o-slide-item-in', ACTIVE_IN_REVERSE = 'o-slide-item-in-reverse', ACTIVE_OUT = 'o-slide-item-out', @@ -25,80 +26,75 @@ enum ClassNames { } const initialized = ref(false); -const slidesRef = ref(null); +const slideWrapRef = ref(null); const slideElList = computed(() => { - return slidesRef.value?.children; + const c = slideWrapRef.value?.children; + return c ? Array.from(c).map((el) => el as HTMLElement) : null; }); const total = computed(() => { - return slidesRef.value?.children.length; + return slideWrapRef.value?.children.length; }); let activeEl: Element | null = null; const isAnimating = ref(false); -const onTransitionStart = () => { - console.log('onTransitionStart'); - isAnimating.value = true; -}; -const onTransitionEnd = () => { - console.log('onTransitionEnd'); - isAnimating.value = false; +const fixIndex = (idx: number) => { + if (!total.value) { + return idx; + } + const i = idx % total.value; + return i >= 0 ? i : i + total.value; }; /** * @param index 激活的slide索引 * @param animate 切换是否执行过度动画 */ -const activeSlideByIndex = (index: number, animate = true, reverse = false) => { +const activeSwitchSlideByIndex = (index: number, animate = true, reverse = false) => { if (!slideElList.value || !total.value) { return; } - let lastIndex = activeIndex.value; - - const i = index % total.value; - activeIndex.value = i >= 0 ? i : i + total.value; + let lastActiveIndex = activeIndex.value; - console.log(lastIndex, activeIndex.value); + activeIndex.value = fixIndex(index); let lastActiveEl = activeEl; activeEl = slideElList.value[activeIndex.value]; lastActiveEl?.classList.remove(ClassNames.ACTIVE); activeEl.classList.add(ClassNames.ACTIVE); - + emits('change', activeIndex.value, lastActiveIndex); if (animate) { // 先移除所有过渡动画类 - lastActiveEl?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE); + lastActiveEl?.classList.remove( + ClassNames.ACTIVE_IN, + ClassNames.ACTIVE_IN_REVERSE, + ClassNames.ACTIVE_OUT, + ClassNames.ACTIVE_OUT_REVERSE, + ClassNames.ANIMATING + ); - activeEl?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE); + activeEl?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING); if (!reverse) { - lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT); - activeEl?.classList.add(ClassNames.ACTIVE_IN); + lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT, ClassNames.ANIMATING); + activeEl?.classList.add(ClassNames.ACTIVE_IN, ClassNames.ANIMATING); } else { - lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT_REVERSE); - activeEl?.classList.add(ClassNames.ACTIVE_IN_REVERSE); + lastActiveEl?.classList.add(ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING); + activeEl?.classList.add(ClassNames.ACTIVE_IN_REVERSE, ClassNames.ANIMATING); } } }; -const changeActiveSlide = (add: number) => { - if (isAnimating.value) { - return; - } - activeSlideByIndex(activeIndex.value + add, true, add < 0); -}; - -const initSlides = () => { +const ininSwitchSlides = () => { if (!slideElList.value) { return; } - activeSlideByIndex(activeIndex.value, false); - initialized.value = true; + activeSwitchSlideByIndex(activeIndex.value, false); // 监听过度动画 - Array.from(slideElList.value).forEach((el) => { + slideElList.value.forEach((el) => { el.addEventListener('animationend', () => { - el?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE); + el?.classList.remove(ClassNames.ACTIVE_IN, ClassNames.ACTIVE_IN_REVERSE, ClassNames.ACTIVE_OUT, ClassNames.ACTIVE_OUT_REVERSE, ClassNames.ANIMATING); if (el === activeEl) { isAnimating.value = false; } @@ -111,17 +107,94 @@ const initSlides = () => { }); }; +const activeCarouselSlideByIndex = (index: number) => { + if (!slideElList.value || !total.value) { + return; + } + activeIndex.value = index; + + const d = slideElList.value[index].offsetLeft; + if (slideWrapRef.value) { + slideWrapRef.value.style.transform = `translate3d(-${d}px, 0, 0)`; + } +}; +const ininCarouselSlides = () => { + if (!slideElList.value) { + return; + } + + slideElList.value.forEach((el, idx) => { + const { clientWidth } = el; + el.style.left = `${clientWidth * idx}px`; + el.addEventListener('click', () => { + activeCarouselSlideByIndex(idx); + }); + }); + + activeCarouselSlideByIndex(activeIndex.value); +}; + +const initSlides = () => { + switch (props.type) { + case 'switch': { + ininSwitchSlides(); + break; + } + case 'carousel': { + ininCarouselSlides(); + break; + } + } + initialized.value = true; +}; +const activeSlideByIndex = (index: number, animate = true, reverse = false) => { + const i = fixIndex(index); + switch (props.type) { + case 'switch': { + activeSwitchSlideByIndex(i, animate, reverse); + break; + } + case 'carousel': { + activeCarouselSlideByIndex(i); + break; + } + } +}; +const changeActiveSlide = (add: number) => { + if (isAnimating.value) { + return; + } + activeSlideByIndex(activeIndex.value + add, true, add < 0); +}; + +let timer: number | null = null; onMounted(() => { initSlides(); + if (props.autoPlay) { + timer = window.setInterval(() => { + activeSlideByIndex(activeIndex.value + 1); + }, props.interval); + } +}); +onUnmounted(() => { + if (timer) { + clearInterval(timer); + timer = null; + } });