From 930829df6feb9ef83a40b0ef7b7be8ab46b53935 Mon Sep 17 00:00:00 2001 From: zhanglongbao <993917246@qq.com> Date: Wed, 7 Sep 2022 22:20:02 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style(collapse):=20=E5=8F=AF=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E8=BF=87=E6=B8=A1=E6=8C=81=E7=BB=AD=E6=97=B6?= =?UTF-8?q?=E9=97=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/carousel/src/carousel.tsx | 11 +++--- .../devui-vue/devui/carousel/src/types.ts | 4 +++ .../select/src/components/select-content.tsx | 2 +- .../docs/components/carousel/index.md | 34 +++++++++++++++++++ 4 files changed, 45 insertions(+), 6 deletions(-) diff --git a/packages/devui-vue/devui/carousel/src/carousel.tsx b/packages/devui-vue/devui/carousel/src/carousel.tsx index b440f60a63..fa70369904 100644 --- a/packages/devui-vue/devui/carousel/src/carousel.tsx +++ b/packages/devui-vue/devui/carousel/src/carousel.tsx @@ -11,8 +11,8 @@ export default defineComponent({ emits: ['update:activeIndex', 'activeIndexChange'], setup(props: CarouselProps, { emit, slots, expose }) { const ns = useNamespace('carousel'); - const { height, showDots, dotPosition, arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } = toRefs(props); - const transitionSpeed = 500; + const { height, showDots, dotPosition, arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex, transitionSpeed } = + toRefs(props); const itemCount = ref(0); const showArrow = ref(false); @@ -51,7 +51,7 @@ export default defineComponent({ targetEl.style.transform = ''; translatePosition(currentIndex.value); - }, transitionSpeed); + }, transitionSpeed.value); }; // 调整首尾翻动时的位置 @@ -86,7 +86,7 @@ export default defineComponent({ return; } - containerRef.value.style.transition = `left ${transitionSpeed}ms ease`; + containerRef.value.style.transition = `left ${transitionSpeed.value}ms ease`; let latestIndex = currentIndex.value; if (index < 0 && currentIndex.value === 0) { @@ -148,7 +148,7 @@ export default defineComponent({ onMounted(() => { if (containerRef.value) { - containerRef.value.style.transition = `left ${transitionSpeed}ms ease`; + containerRef.value.style.transition = `left ${transitionSpeed.value}ms ease`; containerRef.value.style.left = '0%'; } @@ -209,6 +209,7 @@ export default defineComponent({ class={{ 'dot-item': true, active: currentIndex.value === index }} onClick={() => switchStep(index, 'click')} onMouseenter={() => switchStep(index, 'hover')} + style={{ transition: `all ${transitionSpeed.value}ms ease` }} /> ))} diff --git a/packages/devui-vue/devui/carousel/src/types.ts b/packages/devui-vue/devui/carousel/src/types.ts index 5656d4de8b..9da5bc8713 100644 --- a/packages/devui-vue/devui/carousel/src/types.ts +++ b/packages/devui-vue/devui/carousel/src/types.ts @@ -37,6 +37,10 @@ export const carouselProps = { type: Number, default: 0, }, + transitionSpeed:{ + type:Number, + default:500 + } } as const; export type CarouselProps = ExtractPropTypes; diff --git a/packages/devui-vue/devui/select/src/components/select-content.tsx b/packages/devui-vue/devui/select/src/components/select-content.tsx index d94b941619..d3c90b5b40 100644 --- a/packages/devui-vue/devui/select/src/components/select-content.tsx +++ b/packages/devui-vue/devui/select/src/components/select-content.tsx @@ -72,7 +72,7 @@ export default defineComponent({ trigger="hover" disabled={isDisabledTooltip.value} v-slots={{ - default: () => {`+${selectedData.value.length - 1}`}, + default: () => {`+${selectedData.value.length - 1}`}, content: () => (
{selectedData.value.map( diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md index 603d5b3d77..457c58be39 100644 --- a/packages/devui-vue/docs/components/carousel/index.md +++ b/packages/devui-vue/docs/components/carousel/index.md @@ -39,6 +39,39 @@ export default defineComponent({ ::: +### 过渡时间 + +:::demo + +```vue + + + +``` + +::: + ### 指示器&切换箭头 arrowTrigger 设为 always 可以使箭头永久显示，dotTrigger 设为 hover 可以使 hover 到点上就切换。 @@ -174,6 +207,7 @@ export default defineComponent({ | dot-position | `'top'\|'bottom'` | 'bottom' | 可选，面板指示器位置 | [指示器&切换箭头](#指示器-切换箭头) | | dot-trigger | `'click'\|'hover'` | 'click' | 可选，指示器触发轮播方式 | [指示器&切换箭头](#指示器-切换箭头) | | active-index | `number` | 0 | 可选，初始化激活卡片索引，从 0 开始，支持`[(active-index)]`双向绑定 | [基本用法](#基本用法) | +| transition-speed | `number` | 500 | 可选，切换到下一张所用的时间，单位ms | [基本用法](#过渡时间) | ### Carousel 事件 From 46cdcf927b2c973f527827d66d61bf40b02c8c0f Mon Sep 17 00:00:00 2001 From: zhanglongbao <993917246@qq.com> Date: Wed, 7 Sep 2022 22:59:36 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(carousel):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BF=87=E6=B8=A1=E6=8C=81=E7=BB=AD?= =?UTF-8?q?=E6=97=B6=E9=97=B4=20transition-speed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/carousel/src/types.ts | 8 ++++---- packages/devui-vue/docs/components/carousel/index.md | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/devui-vue/devui/carousel/src/types.ts b/packages/devui-vue/devui/carousel/src/types.ts index 9da5bc8713..70e0396dda 100644 --- a/packages/devui-vue/devui/carousel/src/types.ts +++ b/packages/devui-vue/devui/carousel/src/types.ts @@ -37,10 +37,10 @@ export const carouselProps = { type: Number, default: 0, }, - transitionSpeed:{ - type:Number, - default:500 - } + transitionSpeed: { + type: Number, + default: 500, + }, } as const; export type CarouselProps = ExtractPropTypes; diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md index 457c58be39..67bbf788ea 100644 --- a/packages/devui-vue/docs/components/carousel/index.md +++ b/packages/devui-vue/docs/components/carousel/index.md @@ -46,7 +46,7 @@ export default defineComponent({ ```vue