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..70e0396dda 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..67bbf788ea 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 事件