feat(carousel): 增加自定义过渡持续时间 transition-speed

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` }}
                 />
               ))}
             </ul>

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<typeof carouselProps>;

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: () => <Tag size={tagSize.value}>{`+${selectedData.value.length - 1}`}</Tag>,
+                    default: () => <Tag size={tagSize.value as SizeType}>{`+${selectedData.value.length - 1}`}</Tag>,
                     content: () => (
                       <div>
                         {selectedData.value.map(

packages/devui-vue/docs/components/carousel/index.md

@@ -39,6 +39,39 @@ export default defineComponent({
 
 :::
 
+### 过渡时间
+
+:::demo
+
+```vue
+<template>
+  <d-carousel height="200px" :transition-speed="5000">
+    <d-carousel-item class="d-demo-carousel-item" v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4']);
+    return {
+      items,
+    };
+  },
+});
+</script>
+<style>
+.d-demo-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
+```
+
+:::
+
 ### 指示器&切换箭头
 
 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 事件