From 63d6bd2873c5cdc1e735c05db20b6b1adc9fa615 Mon Sep 17 00:00:00 2001 From: devin Date: Tue, 28 Mar 2023 19:47:22 +0800 Subject: [PATCH 01/27] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dslides=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/slides/OSlides.vue | 52 ++++++++++--------- .../slides/__demo__/SlidesBasic.vue | 4 +- 2 files changed, 29 insertions(+), 27 deletions(-) diff --git a/packages/opendesign/src/components/slides/OSlides.vue b/packages/opendesign/src/components/slides/OSlides.vue index 404f9157..65a7301a 100644 --- a/packages/opendesign/src/components/slides/OSlides.vue +++ b/packages/opendesign/src/components/slides/OSlides.vue @@ -46,16 +46,34 @@ const fixIndex = (idx: number) => { // gallery let slidesInstance: GallerySlidesT | null = null; -const activeSlideByIndex = (to: number): Promise => { +function afterActive(to: number, from: number) { + const toSlideEl = (slideElList.value as HTMLElement[])[to]; + const fromSlideEl = (slideElList.value as HTMLElement[])[from]; + + fromSlideEl.classList.remove('o-slide-active'); + toSlideEl.classList.add('o-slide-active'); + + emits('change', to, from); +} +const activeSlideByIndex = (index: number): Promise => { return new Promise((resolve) => { + const to = fixIndex(index); const from = activeIndex.value; - if (to === from || !slideElList.value) { - resolve(false); + + if (isChanging || !slideElList.value || to === from) { + return Promise.resolve(false); } + isChanging = true; + + emits('before-change', to, from); + activeIndex.value = to; switch (props.type) { case 'gallery': { (slidesInstance as GallerySlidesT)?.active(to).then(() => { + afterActive(to, from); + + isChanging = false; resolve(true); }); break; @@ -74,6 +92,7 @@ const stopPlay = () => { timer = null; } }; + const startPlay = () => { stopPlay(); timer = window.setInterval(() => { @@ -83,38 +102,18 @@ const startPlay = () => { // 激活slide const activeSlide = (index: number) => { - if (isChanging || !slideElList.value) { - return Promise.resolve(); - } - isChanging = true; // 停止自动播放 stopPlay(); - const to = fixIndex(index); - const from = activeIndex.value; - - emits('before-change', to, activeIndex.value); - - return activeSlideByIndex(to).then((success) => { + return activeSlideByIndex(index).then((success) => { if (!success) { return; } - const toSlideEl = (slideElList.value as HTMLElement[])[to]; - const fromSlideEl = (slideElList.value as HTMLElement[])[from]; - - fromSlideEl.classList.remove('o-slide-active'); - toSlideEl.classList.add('o-slide-active'); - - emits('change', to, from); - - activeIndex.value = to; - // 恢复自动播放 if (props.autoPlay) { startPlay(); } - isChanging = false; }); }; @@ -125,11 +124,14 @@ const initSlides = () => { switch (props.type) { case 'gallery': { slidesInstance = new GallerySlides(slideElList.value, slideWrapRef.value, activeIndex.value); - break; } } + slideElList.value.forEach((el, idx) => { + if (idx === activeIndex.value) { + el.classList.add('o-slide-active'); + } el.addEventListener('click', () => { activeSlide(idx); }); diff --git a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue index f575f811..284f1d7a 100644 --- a/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue +++ b/packages/opendesign/src/components/slides/__demo__/SlidesBasic.vue @@ -36,13 +36,13 @@ const next = () => { - + +