From 9ccf0df0690575a6044128248a35e0194b3a83e2 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 20:52:40 +0800
Subject: [PATCH 1/9] feat: add carousel component

---
 devui/carousel/carousel.scss          | 110 ++++++++++
 devui/carousel/carousel.tsx           | 286 +++++++++++++++++++++++++-
 devui/carousel/demo/carousel-demo.tsx |   8 +-
 devui/carousel/demo/demo1/index.scss  |   7 +
 devui/carousel/demo/demo1/index.tsx   |  28 +++
 devui/carousel/item.tsx               |  17 ++
 devui/carousel/types.ts               |  40 ++++
 7 files changed, 485 insertions(+), 11 deletions(-)
 create mode 100644 devui/carousel/carousel.scss
 create mode 100644 devui/carousel/demo/demo1/index.scss
 create mode 100644 devui/carousel/demo/demo1/index.tsx
 create mode 100644 devui/carousel/item.tsx
 create mode 100644 devui/carousel/types.ts

diff --git a/devui/carousel/carousel.scss b/devui/carousel/carousel.scss
new file mode 100644
index 00000000..9888352b
--- /dev/null
+++ b/devui/carousel/carousel.scss
@@ -0,0 +1,110 @@
+@import '../style/theme/color';
+@import '../style/theme/shadow';
+@import '../style/core/animation';
+
+@mixin fixed-arrow-button() {
+  position: absolute;
+  top: -18px;
+  z-index: 2;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: (36px/2);
+  background: $devui-highlight-overlay;
+  box-shadow: $devui-shadow-length-hover $devui-light-shadow;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: $devui-area;
+  }
+
+  svg polygon {
+    fill: $devui-text;
+  }
+}
+
+.devui-carousel-container {
+  display: block;
+  position: relative;
+
+  .devui-carousel-arrow {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+
+    .arrow-left {
+      @include fixed-arrow-button();
+
+      left: 10px;
+    }
+
+    .arrow-right {
+      @include fixed-arrow-button();
+
+      right: 10px;
+    }
+  }
+
+  .devui-carousel-item-wrapper {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+
+    .devui-carousel-item-container {
+      display: flex;
+      height: 100%;
+      position: relative;
+
+      .d-carousel-item {
+        flex: 1;
+        position: relative;
+        height: 100%;
+      }
+    }
+  }
+
+  .devui-carousel-dots {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &.bottom {
+      bottom: 8px;
+    }
+
+    &.top {
+      top: 8px;
+    }
+
+    .dot-item {
+      width: 6px;
+      height: 6px;
+      border-radius: (6px/2);
+      margin-right: 8px;
+      background: $devui-icon-fill;
+
+      &:hover {
+        cursor: pointer;
+        background: $devui-list-item-hover-bg;
+      }
+
+      &.active {
+        width: 24px;
+        background: $devui-list-item-active-bg;
+        transition: all $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+      }
+    }
+  }
+}
+
+.devui-carousel-container {
+  .devui-carousel-arrow {
+    .arrow-left,
+    .arrow-right {
+      transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+    }
+  }
+}
diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 9c1640c2..17fd505f 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -1,12 +1,282 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch, onMounted, Fragment, Comment } from "vue";
+import { carouselProps, DotTrigger } from "./types";
+
+import "./carousel.scss";
 
 export default defineComponent({
-  name: 'd-carousel',
-  props: {
+  name: "d-carousel",
+  emits: ["update:activeIndex"],
+  props: carouselProps,
+  setup(props, { emit }) {
+    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
+      props;
+    const transitionSpeed = 500;
+
+    const itemCount = ref(0);
+    const showArrow = ref(false);
+    const currentIndex = ref(0);
+    const wrapperRef = ref<HTMLElement | null>(null);
+    const containerRef = ref<HTMLElement | null>(null);
+    const scheduledId = ref<number | null>(null);
+
+    watch(
+      () => arrowTrigger,
+      () => {
+        showArrow.value = arrowTrigger === "always";
+      },
+      { immediate: true }
+    );
+    watch(
+      () => activeIndex,
+      () => {
+        currentIndex.value = activeIndex;
+      }
+    );
+
+    // 翻页位移
+    const translatePosition = (size: number) => {
+      if (containerRef.value) containerRef.value.style.left = `${-size * 100}%`;
+    };
+    // 调整首尾翻页后的动画
+    const adjustTransition = (targetEl: HTMLElement) => {
+      setTimeout(() => {
+        if (containerRef.value) containerRef.value.style.transition = "";
+
+        targetEl.style.transform = "";
+        translatePosition(currentIndex.value);
+      }, transitionSpeed);
+    };
+
+    // 调整首尾翻动时的位置
+    const adjustPosition = (targetEl: HTMLElement, firstToLast: boolean) => {
+      if (wrapperRef.value) {
+        const wrapperRect = wrapperRef.value.getBoundingClientRect();
+
+        targetEl.style.transform = `translateX(${
+          (firstToLast ? -itemCount.value : itemCount.value) * wrapperRect.width
+        }px)`;
+      }
+    };
+
+    // 指定跳转位置
+    const goto = (index: number) => {
+      if (
+        index === currentIndex.value ||
+        !wrapperRef.value ||
+        !containerRef.value
+      )
+        return;
+
+      containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
+
+      let latestIndex = currentIndex.value;
+      if (index < 0 && currentIndex.value === 0) {
+        // 第一个卡片向前切换
+        latestIndex = itemCount.value - 1;
+        const targetEl = containerRef.value.children[
+          latestIndex
+        ] as HTMLElement;
+        adjustPosition(targetEl, true);
+        translatePosition(-1);
+        adjustTransition(targetEl);
+      } else if (
+        index >= itemCount.value &&
+        currentIndex.value === itemCount.value - 1
+      ) {
+        // 最后一个卡片向后切换
+        latestIndex = 0;
+
+        const targetEl = containerRef.value.children[
+          latestIndex
+        ] as HTMLElement;
+        adjustPosition(targetEl, false);
+        translatePosition(itemCount.value);
+        adjustTransition(targetEl);
+      } else {
+        latestIndex =
+          index < 0
+            ? 0
+            : index > itemCount.value - 1
+            ? itemCount.value - 1
+            : index;
+
+        translatePosition(latestIndex);
+      }
+
+      currentIndex.value = latestIndex;
+      emit("update:activeIndex", latestIndex);
+      autoScheduleTransition();
+    };
+    // 向前切换
+    const prev = () => {
+      goto(currentIndex.value - 1);
+    };
+    // 向后切换
+    const next = () => {
+      goto(currentIndex.value + 1);
+    };
+
+    // 切换箭头监听事件，用于处理hover方式
+    const arrowMouseEvent = (type: "enter" | "leave") => {
+      if (arrowTrigger !== "hover") return;
+
+      showArrow.value = type === "enter";
+    };
+    // 指示器触发切换函数
+    const switchStep = (index: number, type: DotTrigger) => {
+      if (type === dotTrigger) goto(index);
+    };
+
+    // 清除自动轮播任务
+    const clearScheduledTransition = () => {
+      if (scheduledId.value) {
+        clearTimeout(scheduledId.value);
+        scheduledId.value = null;
+      }
+    };
+    // 自动轮播调度任务
+    const autoScheduleTransition = () => {
+      clearScheduledTransition();
+      if (autoplay && autoplaySpeed) {
+        scheduledId.value = setTimeout(() => {
+          next();
+        }, autoplaySpeed);
+      }
+    };
+    const changeItemCount = (val: number) => {
+      itemCount.value = val;
+      autoScheduleTransition();
+    };
+
+    onMounted(() => {
+      if (containerRef.value) {
+        containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
+        containerRef.value.style.left = "0%";
+      }
+
+      autoScheduleTransition();
+    });
+
+    return {
+      wrapperRef,
+      containerRef,
+
+      showArrow,
+      currentIndex,
+      itemCount,
+      changeItemCount,
+
+      goto,
+      prev,
+      next,
+      arrowMouseEvent,
+      switchStep,
+    };
   },
-  setup(props, ctx) {
-    return () => {
-      return <div>devui-carousel</div>
+
+  render() {
+    const {
+      showArrow,
+      currentIndex,
+      itemCount,
+
+      arrowTrigger,
+      height,
+      showDots,
+      dotPosition,
+
+      prev,
+      next,
+      arrowMouseEvent,
+      switchStep,
+      changeItemCount,
+
+      $slots,
+    } = this;
+    const slot: any[] = $slots.default?.() ?? [];
+
+    // 在jsx中，使用map生成slot项会在外层包裹一个Fragment
+    let children = slot;
+    if (children.length === 1 && children[0].type === Fragment) {
+      children = (children[0].children || []).filter(
+        (item) => item?.type !== Comment
+      );
+    }
+    if (children.length !== itemCount) {
+      changeItemCount(children.length);
     }
-  }
-})
\ No newline at end of file
+
+    return (
+      <div
+        class="devui-carousel-container"
+        style={{ height }}
+        onMouseenter={() => arrowMouseEvent("enter")}
+        onMouseleave={() => arrowMouseEvent("leave")}
+      >
+        {/* carousel arrow */}
+        {arrowTrigger !== "never" && showArrow ? (
+          <div class="devui-carousel-arrow">
+            <button class="arrow-left" onClick={() => prev()}>
+              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+                <g
+                  stroke="none"
+                  stroke-width="1"
+                  fill="none"
+                  fill-rule="evenodd"
+                >
+                  <polygon
+                    fill="#293040"
+                    fill-rule="nonzero"
+                    points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
+                  ></polygon>
+                </g>
+              </svg>
+            </button>
+            <button class="arrow-right" onClick={() => next()}>
+              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+                <g
+                  stroke="none"
+                  stroke-width="1"
+                  fill="none"
+                  fill-rule="evenodd"
+                >
+                  <polygon
+                    fill="#293040"
+                    fill-rule="nonzero"
+                    transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
+                    points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
+                  ></polygon>
+                </g>
+              </svg>
+            </button>
+          </div>
+        ) : null}
+        {/* carousel items */}
+        <div class="devui-carousel-item-wrapper" ref="wrapperRef">
+          <div
+            class="devui-carousel-item-container"
+            style={{
+              width: `${itemCount * 100}%`,
+            }}
+            ref="containerRef"
+          >
+            {slot}
+          </div>
+        </div>
+
+        {/* carousel dots */}
+        {itemCount > 0 && showDots ? (
+          <ul class={["devui-carousel-dots", dotPosition]}>
+            {children.map((_, index) => (
+              <li
+                class={{ "dot-item": true, active: currentIndex === index }}
+                onClick={() => switchStep(index, "click")}
+                onMouseenter={() => switchStep(index, "hover")}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    );
+  },
+});
diff --git a/devui/carousel/demo/carousel-demo.tsx b/devui/carousel/demo/carousel-demo.tsx
index 4bb23c7e..1be9767a 100644
--- a/devui/carousel/demo/carousel-demo.tsx
+++ b/devui/carousel/demo/carousel-demo.tsx
@@ -1,12 +1,14 @@
 import { defineComponent } from 'vue'
 
+import Demo1 from './demo1'
+
 export default defineComponent({
   name: 'd-carousel-demo',
-  props: {
-  },
   setup(props, ctx) {
     return () => {
-      return <div>devui-carousel-demo</div>
+      return <div class="d-carousel-item" >
+        <Demo1 />
+      </div>
     }
   }
 })
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.scss b/devui/carousel/demo/demo1/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/demo1/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.tsx b/devui/carousel/demo/demo1/index.tsx
new file mode 100644
index 00000000..a391e20b
--- /dev/null
+++ b/devui/carousel/demo/demo1/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["item 1", 'item 2', 'item 3', 'item 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/item.tsx b/devui/carousel/item.tsx
new file mode 100644
index 00000000..ce93118a
--- /dev/null
+++ b/devui/carousel/item.tsx
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'd-carousel-demo',
+  render() {
+    const {
+      $slots
+    } = this
+    const children = $slots.default?.()
+
+    return (
+      <div class="d-carousel-item ">
+        { children }
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
new file mode 100644
index 00000000..a2b288e5
--- /dev/null
+++ b/devui/carousel/types.ts
@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+
+export type ArrowTrigger = 'hover' | 'never' | 'always';
+export type DotTrigger = 'click' | 'hover';
+export type DotPosition = 'bottom' | 'top';
+
+export const carouselProps = {
+  arrowTrigger: {
+    type: String as PropType<ArrowTrigger>,
+    default: 'always'
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  autoplaySpeed: {
+    type: Number,
+    default: 3000
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+  showDots: {
+    type: Boolean,
+    default: true
+  },
+  dotTrigger: {
+    type: String as PropType<DotTrigger>,
+    default: 'click',
+  },
+  dotPosition: {
+    type: String as PropType<DotPosition>,
+    default: 'bottom',
+  },
+  activeIndex: {
+    type: Number,
+    default: 0
+  },
+} as const;
\ No newline at end of file
-- 
Gitee


From 4084f66144b566b56124b2a1d0a8bcbdab4ffd2e Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 21:37:45 +0800
Subject: [PATCH 2/9] feat: carousel demo crreate

---
 devui/carousel/carousel.tsx                   |  3 +-
 .../demo/{demo1 => autoplay}/index.scss       |  0
 devui/carousel/demo/autoplay/index.tsx        | 28 ++++++++++
 devui/carousel/demo/basic/index.scss          |  7 +++
 .../carousel/demo/{demo1 => basic}/index.tsx  |  4 +-
 devui/carousel/demo/carousel-demo.tsx         | 48 +++++++++++++++--
 devui/carousel/demo/indicator/index.scss      |  7 +++
 devui/carousel/demo/indicator/index.tsx       | 28 ++++++++++
 devui/carousel/demo/operate/index.scss        | 17 ++++++
 devui/carousel/demo/operate/index.tsx         | 52 +++++++++++++++++++
 devui/carousel/types.ts                       |  2 +-
 11 files changed, 188 insertions(+), 8 deletions(-)
 rename devui/carousel/demo/{demo1 => autoplay}/index.scss (100%)
 create mode 100644 devui/carousel/demo/autoplay/index.tsx
 create mode 100644 devui/carousel/demo/basic/index.scss
 rename devui/carousel/demo/{demo1 => basic}/index.tsx (85%)
 create mode 100644 devui/carousel/demo/indicator/index.scss
 create mode 100644 devui/carousel/demo/indicator/index.tsx
 create mode 100644 devui/carousel/demo/operate/index.scss
 create mode 100644 devui/carousel/demo/operate/index.tsx

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 17fd505f..891acd00 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -5,7 +5,7 @@ import "./carousel.scss";
 
 export default defineComponent({
   name: "d-carousel",
-  emits: ["update:activeIndex"],
+  emits: ["update:activeIndex", "activeIndexChange"],
   props: carouselProps,
   setup(props, { emit }) {
     const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
@@ -105,6 +105,7 @@ export default defineComponent({
 
       currentIndex.value = latestIndex;
       emit("update:activeIndex", latestIndex);
+      emit("activeIndexChange", latestIndex);
       autoScheduleTransition();
     };
     // 向前切换
diff --git a/devui/carousel/demo/demo1/index.scss b/devui/carousel/demo/autoplay/index.scss
similarity index 100%
rename from devui/carousel/demo/demo1/index.scss
rename to devui/carousel/demo/autoplay/index.scss
diff --git a/devui/carousel/demo/autoplay/index.tsx b/devui/carousel/demo/autoplay/index.tsx
new file mode 100644
index 00000000..2f769101
--- /dev/null
+++ b/devui/carousel/demo/autoplay/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay autoplaySpeed={ 3000 }>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/demo/basic/index.scss b/devui/carousel/demo/basic/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/basic/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.tsx b/devui/carousel/demo/basic/index.tsx
similarity index 85%
rename from devui/carousel/demo/demo1/index.tsx
rename to devui/carousel/demo/basic/index.tsx
index a391e20b..59cae8f0 100644
--- a/devui/carousel/demo/demo1/index.tsx
+++ b/devui/carousel/demo/basic/index.tsx
@@ -4,7 +4,7 @@ import Item from '../../item';
 
 import './index.scss'
 
-const items = ["item 1", 'item 2', 'item 3', 'item 4']
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
 export default defineComponent({
   name: 'd-button-primary',
   setup() {
@@ -17,7 +17,7 @@ export default defineComponent({
   render() {
     return (
       <div>
-        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="hover">
           {
             items.map(item => <Item key={ item }>{ item }</Item>)
           }
diff --git a/devui/carousel/demo/carousel-demo.tsx b/devui/carousel/demo/carousel-demo.tsx
index 1be9767a..13c2978f 100644
--- a/devui/carousel/demo/carousel-demo.tsx
+++ b/devui/carousel/demo/carousel-demo.tsx
@@ -1,14 +1,54 @@
 import { defineComponent } from 'vue'
+import CodeBox from '../../shared/devui-codebox/devui-codebox'
 
-import Demo1 from './demo1'
+import Basic from './basic'
+import BasicCode from './basic/index.tsx?raw'
+import Indicator from './indicator'
+import IndicatorCode from './indicator/index.tsx?raw'
+import Autoplay from './autoplay'
+import AutoplayCode from './autoplay/index.tsx?raw'
+import Custom from './operate'
+import CustomCode from './operate/index.tsx?raw'
 
 export default defineComponent({
   name: 'd-carousel-demo',
-  setup(props, ctx) {
+  setup() {
+    const basicTsCode: any[] = [{title: 'TSX', language: 'TSX', code: BasicCode}];
+    const indicatorCode: any[] = [{title: 'TSX', language: 'TSX', code: IndicatorCode}];
+    const autoplayCode: any[] = [{title: 'TSX', language: 'TSX', code: AutoplayCode}];
+    const customCode: any[] = [{title: 'TSX', language: 'TSX', code: CustomCode}];
+
     return () => {
-      return <div class="d-carousel-item" >
-        <Demo1 />
+      return <div class="demo-container">
+      <div class="demo-example">
+        <div class="demo-title">基本用法</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-basic" sourceData={ basicTsCode }>
+          <Basic />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">指示器&切换箭头</div>
+        <div class="demo-text">arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。</div>
+        <CodeBox id="components-carousel-indicator" sourceData={ indicatorCode }>
+          <Indicator />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">自动轮播</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-autoplay" sourceData={ autoplayCode }>
+          <Autoplay />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">自定义操作</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-operate" sourceData={ customCode }>
+          <Custom />
+        </CodeBox>
       </div>
+    </div>
     }
   }
 })
\ No newline at end of file
diff --git a/devui/carousel/demo/indicator/index.scss b/devui/carousel/demo/indicator/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/indicator/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/indicator/index.tsx b/devui/carousel/demo/indicator/index.tsx
new file mode 100644
index 00000000..b9e31003
--- /dev/null
+++ b/devui/carousel/demo/indicator/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="always" dotTrigger="hover">
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.scss b/devui/carousel/demo/operate/index.scss
new file mode 100644
index 00000000..b041990f
--- /dev/null
+++ b/devui/carousel/demo/operate/index.scss
@@ -0,0 +1,17 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
+.carousel-demo-operate{
+    margin-top: 10px;
+
+    display: flex;
+    align-items: center;
+
+    > * {
+        margin-right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.tsx b/devui/carousel/demo/operate/index.tsx
new file mode 100644
index 00000000..e4b8802a
--- /dev/null
+++ b/devui/carousel/demo/operate/index.tsx
@@ -0,0 +1,52 @@
+import { defineComponent, ref } from 'vue';
+
+import Button from '../../../button/button'
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const carousel = ref()
+
+    const onPrev = () => {
+      carousel.value?.prev?.()
+    }
+    const onNext = () => {
+      carousel.value?.next?.()
+    }
+    const onGoFirst = () => {
+      carousel.value?.goto?.(0)
+    }
+    const onChange = (index: number) => {
+      console.log(index)
+    }
+
+    return {
+      carousel,
+      onPrev,
+      onNext,
+      onGoFirst,
+      onChange,
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel ref="carousel" height="200px" arrowTrigger="never" onActiveIndexChange={ this.onChange }>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+        <div class="carousel-demo-operate">
+          <Button bsStyle="common" btnClick={ this.onPrev }>上一张</Button>
+          <Button bsStyle="primary" btnClick={ this.onNext }>下一张</Button>
+          <Button bsStyle="common" btnClick={ this.onGoFirst }>第一张</Button>
+        </div>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
index a2b288e5..f7aa172a 100644
--- a/devui/carousel/types.ts
+++ b/devui/carousel/types.ts
@@ -7,7 +7,7 @@ export type DotPosition = 'bottom' | 'top';
 export const carouselProps = {
   arrowTrigger: {
     type: String as PropType<ArrowTrigger>,
-    default: 'always'
+    default: 'hover'
   },
   autoplay: {
     type: Boolean,
-- 
Gitee


From 55acc27c03e30f71dd15ba0f490a9b59a406b846 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 21:43:49 +0800
Subject: [PATCH 3/9] feat: optimize carousel activeIndexChange with props

---
 devui/carousel/carousel.tsx           | 6 +++---
 devui/carousel/demo/operate/index.tsx | 2 +-
 devui/carousel/types.ts               | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 891acd00..331339df 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -5,10 +5,10 @@ import "./carousel.scss";
 
 export default defineComponent({
   name: "d-carousel",
-  emits: ["update:activeIndex", "activeIndexChange"],
+  emits: ["update:activeIndex"],
   props: carouselProps,
   setup(props, { emit }) {
-    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
+    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex, activeIndexChange } =
       props;
     const transitionSpeed = 500;
 
@@ -105,7 +105,7 @@ export default defineComponent({
 
       currentIndex.value = latestIndex;
       emit("update:activeIndex", latestIndex);
-      emit("activeIndexChange", latestIndex);
+      activeIndexChange?.(latestIndex)
       autoScheduleTransition();
     };
     // 向前切换
diff --git a/devui/carousel/demo/operate/index.tsx b/devui/carousel/demo/operate/index.tsx
index e4b8802a..b287b472 100644
--- a/devui/carousel/demo/operate/index.tsx
+++ b/devui/carousel/demo/operate/index.tsx
@@ -36,7 +36,7 @@ export default defineComponent({
   render() {
     return (
       <div>
-        <Carousel ref="carousel" height="200px" arrowTrigger="never" onActiveIndexChange={ this.onChange }>
+        <Carousel ref="carousel" height="200px" arrowTrigger="never" activeIndexChange={ this.onChange }>
           {
             items.map(item => <Item key={ item }>{ item }</Item>)
           }
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
index f7aa172a..fc35b2d6 100644
--- a/devui/carousel/types.ts
+++ b/devui/carousel/types.ts
@@ -37,4 +37,7 @@ export const carouselProps = {
     type: Number,
     default: 0
   },
+  activeIndexChange: {
+    type: Function as unknown as () => ((index: number) => void)
+  },
 } as const;
\ No newline at end of file
-- 
Gitee


From 657ccad71955e7cffcaf4c4a3b8139880208dbe5 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 20:52:40 +0800
Subject: [PATCH 4/9] feat: add carousel component

---
 devui/carousel/carousel.scss          | 110 ++++++++++
 devui/carousel/carousel.tsx           | 286 +++++++++++++++++++++++++-
 devui/carousel/demo/carousel-demo.tsx |   8 +-
 devui/carousel/demo/demo1/index.scss  |   7 +
 devui/carousel/demo/demo1/index.tsx   |  28 +++
 devui/carousel/item.tsx               |  17 ++
 devui/carousel/types.ts               |  40 ++++
 7 files changed, 485 insertions(+), 11 deletions(-)
 create mode 100644 devui/carousel/carousel.scss
 create mode 100644 devui/carousel/demo/demo1/index.scss
 create mode 100644 devui/carousel/demo/demo1/index.tsx
 create mode 100644 devui/carousel/item.tsx
 create mode 100644 devui/carousel/types.ts

diff --git a/devui/carousel/carousel.scss b/devui/carousel/carousel.scss
new file mode 100644
index 00000000..9888352b
--- /dev/null
+++ b/devui/carousel/carousel.scss
@@ -0,0 +1,110 @@
+@import '../style/theme/color';
+@import '../style/theme/shadow';
+@import '../style/core/animation';
+
+@mixin fixed-arrow-button() {
+  position: absolute;
+  top: -18px;
+  z-index: 2;
+  cursor: pointer;
+  width: 36px;
+  height: 36px;
+  border-radius: (36px/2);
+  background: $devui-highlight-overlay;
+  box-shadow: $devui-shadow-length-hover $devui-light-shadow;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background: $devui-area;
+  }
+
+  svg polygon {
+    fill: $devui-text;
+  }
+}
+
+.devui-carousel-container {
+  display: block;
+  position: relative;
+
+  .devui-carousel-arrow {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+
+    .arrow-left {
+      @include fixed-arrow-button();
+
+      left: 10px;
+    }
+
+    .arrow-right {
+      @include fixed-arrow-button();
+
+      right: 10px;
+    }
+  }
+
+  .devui-carousel-item-wrapper {
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+
+    .devui-carousel-item-container {
+      display: flex;
+      height: 100%;
+      position: relative;
+
+      .d-carousel-item {
+        flex: 1;
+        position: relative;
+        height: 100%;
+      }
+    }
+  }
+
+  .devui-carousel-dots {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &.bottom {
+      bottom: 8px;
+    }
+
+    &.top {
+      top: 8px;
+    }
+
+    .dot-item {
+      width: 6px;
+      height: 6px;
+      border-radius: (6px/2);
+      margin-right: 8px;
+      background: $devui-icon-fill;
+
+      &:hover {
+        cursor: pointer;
+        background: $devui-list-item-hover-bg;
+      }
+
+      &.active {
+        width: 24px;
+        background: $devui-list-item-active-bg;
+        transition: all $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+      }
+    }
+  }
+}
+
+.devui-carousel-container {
+  .devui-carousel-arrow {
+    .arrow-left,
+    .arrow-right {
+      transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-smooth;
+    }
+  }
+}
diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 9c1640c2..17fd505f 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -1,12 +1,282 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, watch, onMounted, Fragment, Comment } from "vue";
+import { carouselProps, DotTrigger } from "./types";
+
+import "./carousel.scss";
 
 export default defineComponent({
-  name: 'd-carousel',
-  props: {
+  name: "d-carousel",
+  emits: ["update:activeIndex"],
+  props: carouselProps,
+  setup(props, { emit }) {
+    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
+      props;
+    const transitionSpeed = 500;
+
+    const itemCount = ref(0);
+    const showArrow = ref(false);
+    const currentIndex = ref(0);
+    const wrapperRef = ref<HTMLElement | null>(null);
+    const containerRef = ref<HTMLElement | null>(null);
+    const scheduledId = ref<number | null>(null);
+
+    watch(
+      () => arrowTrigger,
+      () => {
+        showArrow.value = arrowTrigger === "always";
+      },
+      { immediate: true }
+    );
+    watch(
+      () => activeIndex,
+      () => {
+        currentIndex.value = activeIndex;
+      }
+    );
+
+    // 翻页位移
+    const translatePosition = (size: number) => {
+      if (containerRef.value) containerRef.value.style.left = `${-size * 100}%`;
+    };
+    // 调整首尾翻页后的动画
+    const adjustTransition = (targetEl: HTMLElement) => {
+      setTimeout(() => {
+        if (containerRef.value) containerRef.value.style.transition = "";
+
+        targetEl.style.transform = "";
+        translatePosition(currentIndex.value);
+      }, transitionSpeed);
+    };
+
+    // 调整首尾翻动时的位置
+    const adjustPosition = (targetEl: HTMLElement, firstToLast: boolean) => {
+      if (wrapperRef.value) {
+        const wrapperRect = wrapperRef.value.getBoundingClientRect();
+
+        targetEl.style.transform = `translateX(${
+          (firstToLast ? -itemCount.value : itemCount.value) * wrapperRect.width
+        }px)`;
+      }
+    };
+
+    // 指定跳转位置
+    const goto = (index: number) => {
+      if (
+        index === currentIndex.value ||
+        !wrapperRef.value ||
+        !containerRef.value
+      )
+        return;
+
+      containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
+
+      let latestIndex = currentIndex.value;
+      if (index < 0 && currentIndex.value === 0) {
+        // 第一个卡片向前切换
+        latestIndex = itemCount.value - 1;
+        const targetEl = containerRef.value.children[
+          latestIndex
+        ] as HTMLElement;
+        adjustPosition(targetEl, true);
+        translatePosition(-1);
+        adjustTransition(targetEl);
+      } else if (
+        index >= itemCount.value &&
+        currentIndex.value === itemCount.value - 1
+      ) {
+        // 最后一个卡片向后切换
+        latestIndex = 0;
+
+        const targetEl = containerRef.value.children[
+          latestIndex
+        ] as HTMLElement;
+        adjustPosition(targetEl, false);
+        translatePosition(itemCount.value);
+        adjustTransition(targetEl);
+      } else {
+        latestIndex =
+          index < 0
+            ? 0
+            : index > itemCount.value - 1
+            ? itemCount.value - 1
+            : index;
+
+        translatePosition(latestIndex);
+      }
+
+      currentIndex.value = latestIndex;
+      emit("update:activeIndex", latestIndex);
+      autoScheduleTransition();
+    };
+    // 向前切换
+    const prev = () => {
+      goto(currentIndex.value - 1);
+    };
+    // 向后切换
+    const next = () => {
+      goto(currentIndex.value + 1);
+    };
+
+    // 切换箭头监听事件，用于处理hover方式
+    const arrowMouseEvent = (type: "enter" | "leave") => {
+      if (arrowTrigger !== "hover") return;
+
+      showArrow.value = type === "enter";
+    };
+    // 指示器触发切换函数
+    const switchStep = (index: number, type: DotTrigger) => {
+      if (type === dotTrigger) goto(index);
+    };
+
+    // 清除自动轮播任务
+    const clearScheduledTransition = () => {
+      if (scheduledId.value) {
+        clearTimeout(scheduledId.value);
+        scheduledId.value = null;
+      }
+    };
+    // 自动轮播调度任务
+    const autoScheduleTransition = () => {
+      clearScheduledTransition();
+      if (autoplay && autoplaySpeed) {
+        scheduledId.value = setTimeout(() => {
+          next();
+        }, autoplaySpeed);
+      }
+    };
+    const changeItemCount = (val: number) => {
+      itemCount.value = val;
+      autoScheduleTransition();
+    };
+
+    onMounted(() => {
+      if (containerRef.value) {
+        containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
+        containerRef.value.style.left = "0%";
+      }
+
+      autoScheduleTransition();
+    });
+
+    return {
+      wrapperRef,
+      containerRef,
+
+      showArrow,
+      currentIndex,
+      itemCount,
+      changeItemCount,
+
+      goto,
+      prev,
+      next,
+      arrowMouseEvent,
+      switchStep,
+    };
   },
-  setup(props, ctx) {
-    return () => {
-      return <div>devui-carousel</div>
+
+  render() {
+    const {
+      showArrow,
+      currentIndex,
+      itemCount,
+
+      arrowTrigger,
+      height,
+      showDots,
+      dotPosition,
+
+      prev,
+      next,
+      arrowMouseEvent,
+      switchStep,
+      changeItemCount,
+
+      $slots,
+    } = this;
+    const slot: any[] = $slots.default?.() ?? [];
+
+    // 在jsx中，使用map生成slot项会在外层包裹一个Fragment
+    let children = slot;
+    if (children.length === 1 && children[0].type === Fragment) {
+      children = (children[0].children || []).filter(
+        (item) => item?.type !== Comment
+      );
+    }
+    if (children.length !== itemCount) {
+      changeItemCount(children.length);
     }
-  }
-})
\ No newline at end of file
+
+    return (
+      <div
+        class="devui-carousel-container"
+        style={{ height }}
+        onMouseenter={() => arrowMouseEvent("enter")}
+        onMouseleave={() => arrowMouseEvent("leave")}
+      >
+        {/* carousel arrow */}
+        {arrowTrigger !== "never" && showArrow ? (
+          <div class="devui-carousel-arrow">
+            <button class="arrow-left" onClick={() => prev()}>
+              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+                <g
+                  stroke="none"
+                  stroke-width="1"
+                  fill="none"
+                  fill-rule="evenodd"
+                >
+                  <polygon
+                    fill="#293040"
+                    fill-rule="nonzero"
+                    points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
+                  ></polygon>
+                </g>
+              </svg>
+            </button>
+            <button class="arrow-right" onClick={() => next()}>
+              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
+                <g
+                  stroke="none"
+                  stroke-width="1"
+                  fill="none"
+                  fill-rule="evenodd"
+                >
+                  <polygon
+                    fill="#293040"
+                    fill-rule="nonzero"
+                    transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
+                    points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
+                  ></polygon>
+                </g>
+              </svg>
+            </button>
+          </div>
+        ) : null}
+        {/* carousel items */}
+        <div class="devui-carousel-item-wrapper" ref="wrapperRef">
+          <div
+            class="devui-carousel-item-container"
+            style={{
+              width: `${itemCount * 100}%`,
+            }}
+            ref="containerRef"
+          >
+            {slot}
+          </div>
+        </div>
+
+        {/* carousel dots */}
+        {itemCount > 0 && showDots ? (
+          <ul class={["devui-carousel-dots", dotPosition]}>
+            {children.map((_, index) => (
+              <li
+                class={{ "dot-item": true, active: currentIndex === index }}
+                onClick={() => switchStep(index, "click")}
+                onMouseenter={() => switchStep(index, "hover")}
+              />
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    );
+  },
+});
diff --git a/devui/carousel/demo/carousel-demo.tsx b/devui/carousel/demo/carousel-demo.tsx
index 4bb23c7e..1be9767a 100644
--- a/devui/carousel/demo/carousel-demo.tsx
+++ b/devui/carousel/demo/carousel-demo.tsx
@@ -1,12 +1,14 @@
 import { defineComponent } from 'vue'
 
+import Demo1 from './demo1'
+
 export default defineComponent({
   name: 'd-carousel-demo',
-  props: {
-  },
   setup(props, ctx) {
     return () => {
-      return <div>devui-carousel-demo</div>
+      return <div class="d-carousel-item" >
+        <Demo1 />
+      </div>
     }
   }
 })
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.scss b/devui/carousel/demo/demo1/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/demo1/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.tsx b/devui/carousel/demo/demo1/index.tsx
new file mode 100644
index 00000000..a391e20b
--- /dev/null
+++ b/devui/carousel/demo/demo1/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["item 1", 'item 2', 'item 3', 'item 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/item.tsx b/devui/carousel/item.tsx
new file mode 100644
index 00000000..ce93118a
--- /dev/null
+++ b/devui/carousel/item.tsx
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'd-carousel-demo',
+  render() {
+    const {
+      $slots
+    } = this
+    const children = $slots.default?.()
+
+    return (
+      <div class="d-carousel-item ">
+        { children }
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
new file mode 100644
index 00000000..a2b288e5
--- /dev/null
+++ b/devui/carousel/types.ts
@@ -0,0 +1,40 @@
+import { PropType } from 'vue';
+
+export type ArrowTrigger = 'hover' | 'never' | 'always';
+export type DotTrigger = 'click' | 'hover';
+export type DotPosition = 'bottom' | 'top';
+
+export const carouselProps = {
+  arrowTrigger: {
+    type: String as PropType<ArrowTrigger>,
+    default: 'always'
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  autoplaySpeed: {
+    type: Number,
+    default: 3000
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+  showDots: {
+    type: Boolean,
+    default: true
+  },
+  dotTrigger: {
+    type: String as PropType<DotTrigger>,
+    default: 'click',
+  },
+  dotPosition: {
+    type: String as PropType<DotPosition>,
+    default: 'bottom',
+  },
+  activeIndex: {
+    type: Number,
+    default: 0
+  },
+} as const;
\ No newline at end of file
-- 
Gitee


From 03885faee6d2bae5630f10a011dcae6e0e504616 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 21:37:45 +0800
Subject: [PATCH 5/9] feat: carousel demo crreate

---
 devui/carousel/carousel.tsx                   |  3 +-
 .../demo/{demo1 => autoplay}/index.scss       |  0
 devui/carousel/demo/autoplay/index.tsx        | 28 ++++++++++
 devui/carousel/demo/basic/index.scss          |  7 +++
 .../carousel/demo/{demo1 => basic}/index.tsx  |  4 +-
 devui/carousel/demo/carousel-demo.tsx         | 48 +++++++++++++++--
 devui/carousel/demo/indicator/index.scss      |  7 +++
 devui/carousel/demo/indicator/index.tsx       | 28 ++++++++++
 devui/carousel/demo/operate/index.scss        | 17 ++++++
 devui/carousel/demo/operate/index.tsx         | 52 +++++++++++++++++++
 devui/carousel/types.ts                       |  2 +-
 11 files changed, 188 insertions(+), 8 deletions(-)
 rename devui/carousel/demo/{demo1 => autoplay}/index.scss (100%)
 create mode 100644 devui/carousel/demo/autoplay/index.tsx
 create mode 100644 devui/carousel/demo/basic/index.scss
 rename devui/carousel/demo/{demo1 => basic}/index.tsx (85%)
 create mode 100644 devui/carousel/demo/indicator/index.scss
 create mode 100644 devui/carousel/demo/indicator/index.tsx
 create mode 100644 devui/carousel/demo/operate/index.scss
 create mode 100644 devui/carousel/demo/operate/index.tsx

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 17fd505f..891acd00 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -5,7 +5,7 @@ import "./carousel.scss";
 
 export default defineComponent({
   name: "d-carousel",
-  emits: ["update:activeIndex"],
+  emits: ["update:activeIndex", "activeIndexChange"],
   props: carouselProps,
   setup(props, { emit }) {
     const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
@@ -105,6 +105,7 @@ export default defineComponent({
 
       currentIndex.value = latestIndex;
       emit("update:activeIndex", latestIndex);
+      emit("activeIndexChange", latestIndex);
       autoScheduleTransition();
     };
     // 向前切换
diff --git a/devui/carousel/demo/demo1/index.scss b/devui/carousel/demo/autoplay/index.scss
similarity index 100%
rename from devui/carousel/demo/demo1/index.scss
rename to devui/carousel/demo/autoplay/index.scss
diff --git a/devui/carousel/demo/autoplay/index.tsx b/devui/carousel/demo/autoplay/index.tsx
new file mode 100644
index 00000000..2f769101
--- /dev/null
+++ b/devui/carousel/demo/autoplay/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay autoplaySpeed={ 3000 }>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/demo/basic/index.scss b/devui/carousel/demo/basic/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/basic/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/demo1/index.tsx b/devui/carousel/demo/basic/index.tsx
similarity index 85%
rename from devui/carousel/demo/demo1/index.tsx
rename to devui/carousel/demo/basic/index.tsx
index a391e20b..59cae8f0 100644
--- a/devui/carousel/demo/demo1/index.tsx
+++ b/devui/carousel/demo/basic/index.tsx
@@ -4,7 +4,7 @@ import Item from '../../item';
 
 import './index.scss'
 
-const items = ["item 1", 'item 2', 'item 3', 'item 4']
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
 export default defineComponent({
   name: 'd-button-primary',
   setup() {
@@ -17,7 +17,7 @@ export default defineComponent({
   render() {
     return (
       <div>
-        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="hover">
           {
             items.map(item => <Item key={ item }>{ item }</Item>)
           }
diff --git a/devui/carousel/demo/carousel-demo.tsx b/devui/carousel/demo/carousel-demo.tsx
index 1be9767a..13c2978f 100644
--- a/devui/carousel/demo/carousel-demo.tsx
+++ b/devui/carousel/demo/carousel-demo.tsx
@@ -1,14 +1,54 @@
 import { defineComponent } from 'vue'
+import CodeBox from '../../shared/devui-codebox/devui-codebox'
 
-import Demo1 from './demo1'
+import Basic from './basic'
+import BasicCode from './basic/index.tsx?raw'
+import Indicator from './indicator'
+import IndicatorCode from './indicator/index.tsx?raw'
+import Autoplay from './autoplay'
+import AutoplayCode from './autoplay/index.tsx?raw'
+import Custom from './operate'
+import CustomCode from './operate/index.tsx?raw'
 
 export default defineComponent({
   name: 'd-carousel-demo',
-  setup(props, ctx) {
+  setup() {
+    const basicTsCode: any[] = [{title: 'TSX', language: 'TSX', code: BasicCode}];
+    const indicatorCode: any[] = [{title: 'TSX', language: 'TSX', code: IndicatorCode}];
+    const autoplayCode: any[] = [{title: 'TSX', language: 'TSX', code: AutoplayCode}];
+    const customCode: any[] = [{title: 'TSX', language: 'TSX', code: CustomCode}];
+
     return () => {
-      return <div class="d-carousel-item" >
-        <Demo1 />
+      return <div class="demo-container">
+      <div class="demo-example">
+        <div class="demo-title">基本用法</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-basic" sourceData={ basicTsCode }>
+          <Basic />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">指示器&切换箭头</div>
+        <div class="demo-text">arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。</div>
+        <CodeBox id="components-carousel-indicator" sourceData={ indicatorCode }>
+          <Indicator />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">自动轮播</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-autoplay" sourceData={ autoplayCode }>
+          <Autoplay />
+        </CodeBox>
+      </div>
+      <div class="demo-example">
+        <div class="demo-title">自定义操作</div>
+        <div class="demo-text"></div>
+        <CodeBox id="components-carousel-operate" sourceData={ customCode }>
+          <Custom />
+        </CodeBox>
       </div>
+    </div>
     }
   }
 })
\ No newline at end of file
diff --git a/devui/carousel/demo/indicator/index.scss b/devui/carousel/demo/indicator/index.scss
new file mode 100644
index 00000000..fe7a45bc
--- /dev/null
+++ b/devui/carousel/demo/indicator/index.scss
@@ -0,0 +1,7 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/indicator/index.tsx b/devui/carousel/demo/indicator/index.tsx
new file mode 100644
index 00000000..b9e31003
--- /dev/null
+++ b/devui/carousel/demo/indicator/index.tsx
@@ -0,0 +1,28 @@
+import { defineComponent, ref, watch } from 'vue';
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const activeIndex = ref(0)
+
+    return {
+      activeIndex
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="always" dotTrigger="hover">
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.scss b/devui/carousel/demo/operate/index.scss
new file mode 100644
index 00000000..b041990f
--- /dev/null
+++ b/devui/carousel/demo/operate/index.scss
@@ -0,0 +1,17 @@
+@import '../../../style/devui.scss';
+
+.d-carousel-item {
+    text-align: center;
+    line-height: 200px;
+    background: $devui-global-bg;
+}
+.carousel-demo-operate{
+    margin-top: 10px;
+
+    display: flex;
+    align-items: center;
+
+    > * {
+        margin-right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.tsx b/devui/carousel/demo/operate/index.tsx
new file mode 100644
index 00000000..e4b8802a
--- /dev/null
+++ b/devui/carousel/demo/operate/index.tsx
@@ -0,0 +1,52 @@
+import { defineComponent, ref } from 'vue';
+
+import Button from '../../../button/button'
+import Carousel from '../../carousel';
+import Item from '../../item';
+
+import './index.scss'
+
+const items = ["page 1", 'page 2', 'page 3', 'page 4']
+export default defineComponent({
+  name: 'd-button-primary',
+  setup() {
+    const carousel = ref()
+
+    const onPrev = () => {
+      carousel.value?.prev?.()
+    }
+    const onNext = () => {
+      carousel.value?.next?.()
+    }
+    const onGoFirst = () => {
+      carousel.value?.goto?.(0)
+    }
+    const onChange = (index: number) => {
+      console.log(index)
+    }
+
+    return {
+      carousel,
+      onPrev,
+      onNext,
+      onGoFirst,
+      onChange,
+    }
+  },
+  render() {
+    return (
+      <div>
+        <Carousel ref="carousel" height="200px" arrowTrigger="never" onActiveIndexChange={ this.onChange }>
+          {
+            items.map(item => <Item key={ item }>{ item }</Item>)
+          }
+        </Carousel>
+        <div class="carousel-demo-operate">
+          <Button bsStyle="common" btnClick={ this.onPrev }>上一张</Button>
+          <Button bsStyle="primary" btnClick={ this.onNext }>下一张</Button>
+          <Button bsStyle="common" btnClick={ this.onGoFirst }>第一张</Button>
+        </div>
+      </div>
+    )
+  }
+});
\ No newline at end of file
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
index a2b288e5..f7aa172a 100644
--- a/devui/carousel/types.ts
+++ b/devui/carousel/types.ts
@@ -7,7 +7,7 @@ export type DotPosition = 'bottom' | 'top';
 export const carouselProps = {
   arrowTrigger: {
     type: String as PropType<ArrowTrigger>,
-    default: 'always'
+    default: 'hover'
   },
   autoplay: {
     type: Boolean,
-- 
Gitee


From 00d9de103cc886844713ed77e1c644606c9def4a Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sat, 7 Aug 2021 21:43:49 +0800
Subject: [PATCH 6/9] feat: optimize carousel activeIndexChange with props

---
 devui/carousel/carousel.tsx           | 6 +++---
 devui/carousel/demo/operate/index.tsx | 2 +-
 devui/carousel/types.ts               | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 891acd00..331339df 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -5,10 +5,10 @@ import "./carousel.scss";
 
 export default defineComponent({
   name: "d-carousel",
-  emits: ["update:activeIndex", "activeIndexChange"],
+  emits: ["update:activeIndex"],
   props: carouselProps,
   setup(props, { emit }) {
-    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex } =
+    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex, activeIndexChange } =
       props;
     const transitionSpeed = 500;
 
@@ -105,7 +105,7 @@ export default defineComponent({
 
       currentIndex.value = latestIndex;
       emit("update:activeIndex", latestIndex);
-      emit("activeIndexChange", latestIndex);
+      activeIndexChange?.(latestIndex)
       autoScheduleTransition();
     };
     // 向前切换
diff --git a/devui/carousel/demo/operate/index.tsx b/devui/carousel/demo/operate/index.tsx
index e4b8802a..b287b472 100644
--- a/devui/carousel/demo/operate/index.tsx
+++ b/devui/carousel/demo/operate/index.tsx
@@ -36,7 +36,7 @@ export default defineComponent({
   render() {
     return (
       <div>
-        <Carousel ref="carousel" height="200px" arrowTrigger="never" onActiveIndexChange={ this.onChange }>
+        <Carousel ref="carousel" height="200px" arrowTrigger="never" activeIndexChange={ this.onChange }>
           {
             items.map(item => <Item key={ item }>{ item }</Item>)
           }
diff --git a/devui/carousel/types.ts b/devui/carousel/types.ts
index f7aa172a..fc35b2d6 100644
--- a/devui/carousel/types.ts
+++ b/devui/carousel/types.ts
@@ -37,4 +37,7 @@ export const carouselProps = {
     type: Number,
     default: 0
   },
+  activeIndexChange: {
+    type: Function as unknown as () => ((index: number) => void)
+  },
 } as const;
\ No newline at end of file
-- 
Gitee


From c38231231360ad98bfe6498b0816ceb0f46228c1 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sun, 8 Aug 2021 11:21:11 +0800
Subject: [PATCH 7/9] feat: carousel update according the pr comments

---
 devui/carousel/carousel.tsx | 95 ++++++++++++++++---------------------
 devui/carousel/item.tsx     |  2 +-
 2 files changed, 41 insertions(+), 56 deletions(-)

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index 331339df..a15e1a74 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -1,15 +1,23 @@
-import { defineComponent, ref, watch, onMounted, Fragment, Comment } from "vue";
-import { carouselProps, DotTrigger } from "./types";
+import { defineComponent, ref, watch, onMounted, Fragment, Comment } from 'vue';
+import { carouselProps, DotTrigger } from './types';
 
-import "./carousel.scss";
+import Icon from '../icon/src/icon'
+
+import './carousel.scss';
 
 export default defineComponent({
-  name: "d-carousel",
-  emits: ["update:activeIndex"],
+  name: 'DCarousel',
   props: carouselProps,
+  emits: ['update:activeIndex'],
   setup(props, { emit }) {
-    const { arrowTrigger, autoplay, autoplaySpeed, dotTrigger, activeIndex, activeIndexChange } =
-      props;
+    const {
+      arrowTrigger,
+      autoplay,
+      autoplaySpeed,
+      dotTrigger,
+      activeIndex,
+      activeIndexChange
+    } = props;
     const transitionSpeed = 500;
 
     const itemCount = ref(0);
@@ -22,7 +30,7 @@ export default defineComponent({
     watch(
       () => arrowTrigger,
       () => {
-        showArrow.value = arrowTrigger === "always";
+        showArrow.value = arrowTrigger === 'always';
       },
       { immediate: true }
     );
@@ -40,9 +48,9 @@ export default defineComponent({
     // 调整首尾翻页后的动画
     const adjustTransition = (targetEl: HTMLElement) => {
       setTimeout(() => {
-        if (containerRef.value) containerRef.value.style.transition = "";
+        if (containerRef.value) containerRef.value.style.transition = '';
 
-        targetEl.style.transform = "";
+        targetEl.style.transform = '';
         translatePosition(currentIndex.value);
       }, transitionSpeed);
     };
@@ -64,8 +72,9 @@ export default defineComponent({
         index === currentIndex.value ||
         !wrapperRef.value ||
         !containerRef.value
-      )
+      ) {
         return;
+      }
 
       containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
 
@@ -96,15 +105,17 @@ export default defineComponent({
         latestIndex =
           index < 0
             ? 0
-            : index > itemCount.value - 1
-            ? itemCount.value - 1
-            : index;
+            : (
+              index > itemCount.value - 1
+                ? itemCount.value - 1
+                : index
+            )
 
         translatePosition(latestIndex);
       }
 
       currentIndex.value = latestIndex;
-      emit("update:activeIndex", latestIndex);
+      emit('update:activeIndex', latestIndex);
       activeIndexChange?.(latestIndex)
       autoScheduleTransition();
     };
@@ -118,10 +129,10 @@ export default defineComponent({
     };
 
     // 切换箭头监听事件，用于处理hover方式
-    const arrowMouseEvent = (type: "enter" | "leave") => {
-      if (arrowTrigger !== "hover") return;
+    const arrowMouseEvent = (type: 'enter' | 'leave') => {
+      if (arrowTrigger !== 'hover') return;
 
-      showArrow.value = type === "enter";
+      showArrow.value = type === 'enter';
     };
     // 指示器触发切换函数
     const switchStep = (index: number, type: DotTrigger) => {
@@ -152,7 +163,7 @@ export default defineComponent({
     onMounted(() => {
       if (containerRef.value) {
         containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
-        containerRef.value.style.left = "0%";
+        containerRef.value.style.left = '0%';
       }
 
       autoScheduleTransition();
@@ -211,44 +222,18 @@ export default defineComponent({
       <div
         class="devui-carousel-container"
         style={{ height }}
-        onMouseenter={() => arrowMouseEvent("enter")}
-        onMouseleave={() => arrowMouseEvent("leave")}
+        onMouseenter={() => arrowMouseEvent('enter')}
+        onMouseleave={() => arrowMouseEvent('leave')}
       >
         {/* carousel arrow */}
-        {arrowTrigger !== "never" && showArrow ? (
+        {arrowTrigger !== 'never' && showArrow ? (
           <div class="devui-carousel-arrow">
+            
             <button class="arrow-left" onClick={() => prev()}>
-              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
-                <g
-                  stroke="none"
-                  stroke-width="1"
-                  fill="none"
-                  fill-rule="evenodd"
-                >
-                  <polygon
-                    fill="#293040"
-                    fill-rule="nonzero"
-                    points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
-                  ></polygon>
-                </g>
-              </svg>
+              <Icon name="arrow-left"   />
             </button>
             <button class="arrow-right" onClick={() => next()}>
-              <svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
-                <g
-                  stroke="none"
-                  stroke-width="1"
-                  fill="none"
-                  fill-rule="evenodd"
-                >
-                  <polygon
-                    fill="#293040"
-                    fill-rule="nonzero"
-                    transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
-                    points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
-                  ></polygon>
-                </g>
-              </svg>
+              <Icon name="arrow-right" />
             </button>
           </div>
         ) : null}
@@ -267,12 +252,12 @@ export default defineComponent({
 
         {/* carousel dots */}
         {itemCount > 0 && showDots ? (
-          <ul class={["devui-carousel-dots", dotPosition]}>
+          <ul class={['devui-carousel-dots', dotPosition]}>
             {children.map((_, index) => (
               <li
-                class={{ "dot-item": true, active: currentIndex === index }}
-                onClick={() => switchStep(index, "click")}
-                onMouseenter={() => switchStep(index, "hover")}
+                class={{ 'dot-item': true, active: currentIndex === index }}
+                onClick={() => switchStep(index, 'click')}
+                onMouseenter={() => switchStep(index, 'hover')}
               />
             ))}
           </ul>
diff --git a/devui/carousel/item.tsx b/devui/carousel/item.tsx
index ce93118a..c5c367ac 100644
--- a/devui/carousel/item.tsx
+++ b/devui/carousel/item.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'd-carousel-demo',
+  name: 'DCarouselItem',
   render() {
     const {
       $slots
-- 
Gitee


From 4372b4287c2d97f79685e62d3f8af014922c1203 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sun, 8 Aug 2021 12:00:22 +0800
Subject: [PATCH 8/9] feat: add carousel vitepress docs

---
 devui/carousel/carousel.scss       |  6 ++--
 devui/vue-devui.ts                 | 11 ++++++
 sites/.vitepress/config/sidebar.ts |  3 +-
 sites/components/carousel/index.md | 57 ++++++++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 sites/components/carousel/index.md

diff --git a/devui/carousel/carousel.scss b/devui/carousel/carousel.scss
index 9888352b..855639f1 100644
--- a/devui/carousel/carousel.scss
+++ b/devui/carousel/carousel.scss
@@ -9,7 +9,7 @@
   cursor: pointer;
   width: 36px;
   height: 36px;
-  border-radius: (36px/2);
+  border-radius: 18px;
   background: $devui-highlight-overlay;
   box-shadow: $devui-shadow-length-hover $devui-light-shadow;
   display: inline-flex;
@@ -71,6 +71,8 @@
     justify-content: center;
     width: 100%;
 
+    list-style: none;
+
     &.bottom {
       bottom: 8px;
     }
@@ -82,7 +84,7 @@
     .dot-item {
       width: 6px;
       height: 6px;
-      border-radius: (6px/2);
+      border-radius: 3px;
       margin-right: 8px;
       background: $devui-icon-fill;
 
diff --git a/devui/vue-devui.ts b/devui/vue-devui.ts
index 5dfe708b..e13a3207 100644
--- a/devui/vue-devui.ts
+++ b/devui/vue-devui.ts
@@ -20,6 +20,8 @@ import TextInput from './text-input/src/text-input';
 
 // 数据展示
 import Avatar from './avatar/avatar';
+import Carousel from './carousel/carousel';
+import CarouselItem from './carousel/item';
 
 function install(app: App) {
   const packages = [
@@ -27,7 +29,10 @@ function install(app: App) {
     Tabs,
     Alert,
     Checkbox, Radio, Switch, TagsInput, TextInput,
+
     Avatar,
+    Carousel,
+    CarouselItem,
   ];
   packages.forEach((item:any) => {
     if (item.install) {
@@ -40,10 +45,16 @@ function install(app: App) {
 
 export {
   Button, Icon, Panel,
+
   Tabs,
+
   Alert,
+
   Checkbox, Radio, Switch, TagsInput, TextInput,
+
   Avatar,
+  Carousel,
+  CarouselItem,
 };
 
 export default { install, version: '0.0.1' };
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 5dc1723d..7d973b74 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -35,8 +35,9 @@ const sidebar = {
       text: '数据展示',
       children: [
         { text: 'Avatar 头像', link: '/components/avatar/' },
+        { text: '走马灯', link: '/components/carousel/' },
       ]
-    }
+    },
   ],
 }
 
diff --git a/sites/components/carousel/index.md b/sites/components/carousel/index.md
new file mode 100644
index 00000000..5db290a7
--- /dev/null
+++ b/sites/components/carousel/index.md
@@ -0,0 +1,57 @@
+# Carousel 走马灯
+
+一组轮播的区域。
+
+### 何时使用
+
+1. 用于展示图片或者卡片。
+
+### 基本用法
+<d-carousel height="200px">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+
+```html
+<d-carousel height="200px">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+```
+```css
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+```
+
+### 自动轮播
+<d-carousel height="200px" autoplay>
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+
+```html
+<d-carousel height="200px" autoplay>
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+```
+
+<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 lang="scss">
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
\ No newline at end of file
-- 
Gitee


From 40837bb76a30b9d18d7ac3818c5fd51e9b6be145 Mon Sep 17 00:00:00 2001
From: qqq <sevensoft@yeah.net>
Date: Sun, 8 Aug 2021 18:13:08 +0800
Subject: [PATCH 9/9] feat: update carousel documents

---
 devui/carousel/carousel.tsx              |   3 +-
 devui/carousel/demo/autoplay/index.scss  |   7 --
 devui/carousel/demo/autoplay/index.tsx   |  28 ------
 devui/carousel/demo/basic/index.scss     |   7 --
 devui/carousel/demo/basic/index.tsx      |  28 ------
 devui/carousel/demo/carousel-demo.tsx    |  54 -----------
 devui/carousel/demo/carousel.route.ts    |  15 ---
 devui/carousel/demo/indicator/index.scss |   7 --
 devui/carousel/demo/indicator/index.tsx  |  28 ------
 devui/carousel/demo/operate/index.scss   |  17 ----
 devui/carousel/demo/operate/index.tsx    |  52 -----------
 devui/carousel/doc/api-cn.md             |  40 --------
 devui/carousel/doc/api-en.md             |  40 --------
 sites/.vitepress/config/sidebar.ts       |   2 +-
 sites/components/carousel/index.md       | 111 ++++++++++++++++++++++-
 15 files changed, 111 insertions(+), 328 deletions(-)
 delete mode 100644 devui/carousel/demo/autoplay/index.scss
 delete mode 100644 devui/carousel/demo/autoplay/index.tsx
 delete mode 100644 devui/carousel/demo/basic/index.scss
 delete mode 100644 devui/carousel/demo/basic/index.tsx
 delete mode 100644 devui/carousel/demo/carousel-demo.tsx
 delete mode 100644 devui/carousel/demo/carousel.route.ts
 delete mode 100644 devui/carousel/demo/indicator/index.scss
 delete mode 100644 devui/carousel/demo/indicator/index.tsx
 delete mode 100644 devui/carousel/demo/operate/index.scss
 delete mode 100644 devui/carousel/demo/operate/index.tsx
 delete mode 100644 devui/carousel/doc/api-cn.md
 delete mode 100644 devui/carousel/doc/api-en.md

diff --git a/devui/carousel/carousel.tsx b/devui/carousel/carousel.tsx
index a15e1a74..d5e5f084 100644
--- a/devui/carousel/carousel.tsx
+++ b/devui/carousel/carousel.tsx
@@ -38,7 +38,8 @@ export default defineComponent({
       () => activeIndex,
       () => {
         currentIndex.value = activeIndex;
-      }
+      },
+      { immediate: true }
     );
 
     // 翻页位移
diff --git a/devui/carousel/demo/autoplay/index.scss b/devui/carousel/demo/autoplay/index.scss
deleted file mode 100644
index fe7a45bc..00000000
--- a/devui/carousel/demo/autoplay/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../../../style/devui.scss';
-
-.d-carousel-item {
-    text-align: center;
-    line-height: 200px;
-    background: $devui-global-bg;
-}
\ No newline at end of file
diff --git a/devui/carousel/demo/autoplay/index.tsx b/devui/carousel/demo/autoplay/index.tsx
deleted file mode 100644
index 2f769101..00000000
--- a/devui/carousel/demo/autoplay/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineComponent, ref, watch } from 'vue';
-import Carousel from '../../carousel';
-import Item from '../../item';
-
-import './index.scss'
-
-const items = ["page 1", 'page 2', 'page 3', 'page 4']
-export default defineComponent({
-  name: 'd-button-primary',
-  setup() {
-    const activeIndex = ref(0)
-
-    return {
-      activeIndex
-    }
-  },
-  render() {
-    return (
-      <div>
-        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } autoplay autoplaySpeed={ 3000 }>
-          {
-            items.map(item => <Item key={ item }>{ item }</Item>)
-          }
-        </Carousel>
-      </div>
-    )
-  }
-});
\ No newline at end of file
diff --git a/devui/carousel/demo/basic/index.scss b/devui/carousel/demo/basic/index.scss
deleted file mode 100644
index fe7a45bc..00000000
--- a/devui/carousel/demo/basic/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../../../style/devui.scss';
-
-.d-carousel-item {
-    text-align: center;
-    line-height: 200px;
-    background: $devui-global-bg;
-}
\ No newline at end of file
diff --git a/devui/carousel/demo/basic/index.tsx b/devui/carousel/demo/basic/index.tsx
deleted file mode 100644
index 59cae8f0..00000000
--- a/devui/carousel/demo/basic/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineComponent, ref, watch } from 'vue';
-import Carousel from '../../carousel';
-import Item from '../../item';
-
-import './index.scss'
-
-const items = ["page 1", 'page 2', 'page 3', 'page 4']
-export default defineComponent({
-  name: 'd-button-primary',
-  setup() {
-    const activeIndex = ref(0)
-
-    return {
-      activeIndex
-    }
-  },
-  render() {
-    return (
-      <div>
-        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="hover">
-          {
-            items.map(item => <Item key={ item }>{ item }</Item>)
-          }
-        </Carousel>
-      </div>
-    )
-  }
-});
\ No newline at end of file
diff --git a/devui/carousel/demo/carousel-demo.tsx b/devui/carousel/demo/carousel-demo.tsx
deleted file mode 100644
index 13c2978f..00000000
--- a/devui/carousel/demo/carousel-demo.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { defineComponent } from 'vue'
-import CodeBox from '../../shared/devui-codebox/devui-codebox'
-
-import Basic from './basic'
-import BasicCode from './basic/index.tsx?raw'
-import Indicator from './indicator'
-import IndicatorCode from './indicator/index.tsx?raw'
-import Autoplay from './autoplay'
-import AutoplayCode from './autoplay/index.tsx?raw'
-import Custom from './operate'
-import CustomCode from './operate/index.tsx?raw'
-
-export default defineComponent({
-  name: 'd-carousel-demo',
-  setup() {
-    const basicTsCode: any[] = [{title: 'TSX', language: 'TSX', code: BasicCode}];
-    const indicatorCode: any[] = [{title: 'TSX', language: 'TSX', code: IndicatorCode}];
-    const autoplayCode: any[] = [{title: 'TSX', language: 'TSX', code: AutoplayCode}];
-    const customCode: any[] = [{title: 'TSX', language: 'TSX', code: CustomCode}];
-
-    return () => {
-      return <div class="demo-container">
-      <div class="demo-example">
-        <div class="demo-title">基本用法</div>
-        <div class="demo-text"></div>
-        <CodeBox id="components-carousel-basic" sourceData={ basicTsCode }>
-          <Basic />
-        </CodeBox>
-      </div>
-      <div class="demo-example">
-        <div class="demo-title">指示器&切换箭头</div>
-        <div class="demo-text">arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。</div>
-        <CodeBox id="components-carousel-indicator" sourceData={ indicatorCode }>
-          <Indicator />
-        </CodeBox>
-      </div>
-      <div class="demo-example">
-        <div class="demo-title">自动轮播</div>
-        <div class="demo-text"></div>
-        <CodeBox id="components-carousel-autoplay" sourceData={ autoplayCode }>
-          <Autoplay />
-        </CodeBox>
-      </div>
-      <div class="demo-example">
-        <div class="demo-title">自定义操作</div>
-        <div class="demo-text"></div>
-        <CodeBox id="components-carousel-operate" sourceData={ customCode }>
-          <Custom />
-        </CodeBox>
-      </div>
-    </div>
-    }
-  }
-})
\ No newline at end of file
diff --git a/devui/carousel/demo/carousel.route.ts b/devui/carousel/demo/carousel.route.ts
deleted file mode 100644
index d82a8974..00000000
--- a/devui/carousel/demo/carousel.route.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import CarouselDemoComponent from './carousel-demo'
-import DevUIApiComponent from '../../shared/devui-api/devui-api'
-
-import ApiCn from '../doc/api-cn.md'
-import ApiEn from '../doc/api-en.md'
-const routes = [
-  { path: '',  redirectTo: 'demo' },
-  { path: 'demo', component: CarouselDemoComponent},
-  { path: 'api', component: DevUIApiComponent, meta: {
-    'zh-cn': ApiCn,
-    'en-us': ApiEn
-  }}
-]
-
-export default routes
diff --git a/devui/carousel/demo/indicator/index.scss b/devui/carousel/demo/indicator/index.scss
deleted file mode 100644
index fe7a45bc..00000000
--- a/devui/carousel/demo/indicator/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import '../../../style/devui.scss';
-
-.d-carousel-item {
-    text-align: center;
-    line-height: 200px;
-    background: $devui-global-bg;
-}
\ No newline at end of file
diff --git a/devui/carousel/demo/indicator/index.tsx b/devui/carousel/demo/indicator/index.tsx
deleted file mode 100644
index b9e31003..00000000
--- a/devui/carousel/demo/indicator/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineComponent, ref, watch } from 'vue';
-import Carousel from '../../carousel';
-import Item from '../../item';
-
-import './index.scss'
-
-const items = ["page 1", 'page 2', 'page 3', 'page 4']
-export default defineComponent({
-  name: 'd-button-primary',
-  setup() {
-    const activeIndex = ref(0)
-
-    return {
-      activeIndex
-    }
-  },
-  render() {
-    return (
-      <div>
-        <Carousel height="200px" v-model={ [this.activeIndex, 'activeIndex'] } arrowTrigger="always" dotTrigger="hover">
-          {
-            items.map(item => <Item key={ item }>{ item }</Item>)
-          }
-        </Carousel>
-      </div>
-    )
-  }
-});
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.scss b/devui/carousel/demo/operate/index.scss
deleted file mode 100644
index b041990f..00000000
--- a/devui/carousel/demo/operate/index.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../../../style/devui.scss';
-
-.d-carousel-item {
-    text-align: center;
-    line-height: 200px;
-    background: $devui-global-bg;
-}
-.carousel-demo-operate{
-    margin-top: 10px;
-
-    display: flex;
-    align-items: center;
-
-    > * {
-        margin-right: 20px;
-    }
-}
\ No newline at end of file
diff --git a/devui/carousel/demo/operate/index.tsx b/devui/carousel/demo/operate/index.tsx
deleted file mode 100644
index b287b472..00000000
--- a/devui/carousel/demo/operate/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { defineComponent, ref } from 'vue';
-
-import Button from '../../../button/button'
-import Carousel from '../../carousel';
-import Item from '../../item';
-
-import './index.scss'
-
-const items = ["page 1", 'page 2', 'page 3', 'page 4']
-export default defineComponent({
-  name: 'd-button-primary',
-  setup() {
-    const carousel = ref()
-
-    const onPrev = () => {
-      carousel.value?.prev?.()
-    }
-    const onNext = () => {
-      carousel.value?.next?.()
-    }
-    const onGoFirst = () => {
-      carousel.value?.goto?.(0)
-    }
-    const onChange = (index: number) => {
-      console.log(index)
-    }
-
-    return {
-      carousel,
-      onPrev,
-      onNext,
-      onGoFirst,
-      onChange,
-    }
-  },
-  render() {
-    return (
-      <div>
-        <Carousel ref="carousel" height="200px" arrowTrigger="never" activeIndexChange={ this.onChange }>
-          {
-            items.map(item => <Item key={ item }>{ item }</Item>)
-          }
-        </Carousel>
-        <div class="carousel-demo-operate">
-          <Button bsStyle="common" btnClick={ this.onPrev }>上一张</Button>
-          <Button bsStyle="primary" btnClick={ this.onNext }>下一张</Button>
-          <Button bsStyle="common" btnClick={ this.onGoFirst }>第一张</Button>
-        </div>
-      </div>
-    )
-  }
-});
\ No newline at end of file
diff --git a/devui/carousel/doc/api-cn.md b/devui/carousel/doc/api-cn.md
deleted file mode 100644
index 05132f50..00000000
--- a/devui/carousel/doc/api-cn.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 如何使用
-在module中引入：
-```ts
-import { CarouselModule } from 'ng-devui/carousel';
-```
-在页面中使用：
-```html
-<d-carousel>
-  <d-carousel-item></d-carousel-item>
-</d-carousel>
-```
-
-# d-carousel
-
-## d-carousel 参数
-
-|     参数     |             类型             |   默认值   | 描述                                            | 跳转 Demo                                        |
-| :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ |
-| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover'  | 可选，指定切换箭头显示方式                      | [指示器&切换箭头](demo#trigger-usage)  |
-|   autoplay   |          `boolean`           |  false   | 可选，是否自动轮播                              | [自动轮播](demo#autoplay-usage) |
-| autoplaySpeed |           `number`           |   3000   | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](demo#autoplay-usage) |
-|    height    |           `string`           |  '100%'  | 可选，轮播容器高度                              | [基本用法](demo#basic-usage)    |
-|   showDots   |          `boolean`           |   true   | 可选，是否显示面板指示器                        | [自动轮播](demo#autoplay-usage) |
-| dotPosition  |      `'top'\|'bottom'`       | 'bottom' | 可选，面板指示器位置                            | [指示器&切换箭头](demo#trigger-usage)  |
-|  dotTrigger  |      `'click'\|'hover'`      | 'click'  | 可选，指示器触发轮播方式                        | [指示器&切换箭头](demo#trigger-usage)  |
-| activeIndex  |           `number`           |    0     | 可选，初始化激活卡片索引，从 0 开始，支持`[(activeIndex)]`双向绑定        | [基本用法](demo#basic-usage)    |
-
-## d-carousel 事件
-
-|      事件          |          类型           |                    描述                     | 跳转 Demo                                                     |
-| :----------------: | :---------------------: | :-----------------------------------------: | -------------------------------------------------            |
-|      activeIndexChange    | `EventEmitter<number>`  | 卡片切换时，返回当前卡片的索引，从0开始    | [基本用法](demo#basic-usage)             |
-
-## d-carousel 方法
-
-|    方法     | 描述                                | 跳转 Demo                       |
-| :---------: | :---------------------------------- | :----------------------------- |
-|   prev()    | 切换到上一张卡片                    | [自定义操作](demo#custom-usage)   |
-|   next()    | 切换到下一张卡片                    | [自定义操作](demo#custom-usage)   |
-| goTo(index) | 切换到指定索引的卡片，索引从 0 开始 | [自定义操作](demo#custom-usage)   |
diff --git a/devui/carousel/doc/api-en.md b/devui/carousel/doc/api-en.md
deleted file mode 100644
index f9a539cc..00000000
--- a/devui/carousel/doc/api-en.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# How To Use
-Import in module：
-```ts
-import { CarouselModule } from 'ng-devui/carousel';
-```
-In the page：
-```html
-<d-carousel>
-  <d-carousel-item></d-carousel-item>
-</d-carousel>
-```
-
-# d-carousel
-
-## d-carousel parameter
-
-|   Parameter   |             Type             | Default | Description | Jump to Demo |
-| :-----------: | :--------------------------: | :-----: | :---------------------------------------------- | ------------------------------------------------ |
-| arrowTrigger  | `'hover'\|'never'\|'always'` | 'hover' | Optional. Specifying the display mode of the switching arrow | [Indicator & Toggle Arrow](demo#trigger-usage) |
-|   autoplay    |          `boolean`           |  false  | Optional. Indicating whether to enable automatic NVOD. | [Automatic NVOD](demo#autoplay-usage) |
-| autoplaySpeed |          `number`            |  3000   | Optional. Automatic NVOD speed, in ms. This parameter is used together with `autoplay'. | [Automatic NVOD](demo#autoplay-usage) |
-|    height     |          `string`            | '100%'  | Optional. NVOD container height | [Basic usage](demo#basic-usage) |
-|   showDots    |          `boolean`           |  true   | Optional. Indicating whether to display the panel indicator | [Automatic NVOD](demo#autoplay-usage) |
-|  dotPosition  |       `'top'\|'bottom'`      |'bottom' | Optional. Indicator position on the panel | [Indicator & Toggle Arrow](demo#trigger-usage) |
-|  dotTrigger   |       `click'\|'hover'`      | 'click' | Optional. The indicator triggers the NVOD mode | [Indicator & Toggle Arrow](demo#trigger-usage) |
-|  activeIndex  |          `number`            |    0    | Optional. Initializes the activation card index, starting from 0. `[(activeIndex)]` bidirectional binding is supported. | [Basic usage](demo#basic-usage) |
-
-## d-carousel event
-
-| Event | Type | Description | Jump to Demo |
-| :----------------: | :---------------------: | :-----------------------------------------: | ------------------------------------------------- |
-| activeIndexChange | `EventEmitter<number>` | Returns the index of the current card when the card is switched. The index starts from 0. | [Basic usage](demo#basic-usage) |
-
-## d-carousel method
-
-| Method | Description | Jump to Demo |
-| :---------: | :---------------------------------- | :----------------------------- |
-| prev() | Switch to the previous card | [Custom Operations](demo#custom-usage) |
-| next() | Switch to the next card | [Custom Operations](demo#custom-usage) |
-| goTo(index) | Switch to the card with a specified index. The index starts from 0. | [Custom Operations](demo#custom-usage) |
diff --git a/sites/.vitepress/config/sidebar.ts b/sites/.vitepress/config/sidebar.ts
index 7d973b74..9866743e 100644
--- a/sites/.vitepress/config/sidebar.ts
+++ b/sites/.vitepress/config/sidebar.ts
@@ -35,7 +35,7 @@ const sidebar = {
       text: '数据展示',
       children: [
         { text: 'Avatar 头像', link: '/components/avatar/' },
-        { text: '走马灯', link: '/components/carousel/' },
+        { text: 'Carousel 走马灯', link: '/components/carousel/' },
       ]
     },
   ],
diff --git a/sites/components/carousel/index.md b/sites/components/carousel/index.md
index 5db290a7..ad99fbec 100644
--- a/sites/components/carousel/index.md
+++ b/sites/components/carousel/index.md
@@ -7,7 +7,7 @@
 1. 用于展示图片或者卡片。
 
 ### 基本用法
-<d-carousel height="200px">
+<d-carousel height="200px" v-model:activeIndex="activeIndex" :activeIndexChange="onChange">
   <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
 </d-carousel>
 
@@ -23,17 +23,89 @@
   background: var(--devui-global-bg, #f3f6f8);
 }
 ```
+### 指示器&切换箭头
+arrowTrigger设为always可以使箭头永久显示，dotTrigger设为hover可以使hover到点上就切换。
 
+<d-carousel height="200px" arrowTrigger="always" dotTrigger="hover">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+
+```html
+<d-carousel height="200px" arrowTrigger="always" dotTrigger="hover">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+```
 ### 自动轮播
-<d-carousel height="200px" autoplay>
+<d-carousel height="200px" autoplay :autoplaySpeed="3000">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+
+```html
+<d-carousel height="200px" autoplay :autoplaySpeed="3000">
+  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
+</d-carousel>
+```
+### 自定义操作
+<d-carousel ref="carousel" height="200px" arrowTrigger="never">
   <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
 </d-carousel>
+<div class="carousel-demo-operate">
+  <d-button bsStyle="common" :btnClick="onPrev">上一张</d-button>
+  <d-button bsStyle="primary" :btnClick="onNext">下一张</d-button>
+  <d-button bsStyle="common" :btnClick="onGoFirst">第一张</d-button>
+</div>
 
 ```html
-<d-carousel height="200px" autoplay>
+<d-carousel ref="carousel" height="200px" arrowTrigger="never" :activeIndexChange="onChange">
   <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
 </d-carousel>
+<div class="carousel-demo-operate">
+  <d-button bsStyle="common" :btnClick="onPrev">上一张</d-button>
+  <d-button bsStyle="primary" :btnClick="onNext">下一张</d-button>
+  <d-button bsStyle="common" :btnClick="onGoFirst">第一张</d-button>
+</div>
 ```
+```css
+.carousel-demo-operate{
+    margin-top: 10px;
+
+    display: flex;
+    align-items: center;
+
+    > * {
+        margin-right: 20px;
+    }
+}
+```
+
+### API
+#### 参数
+
+|     参数     |             类型             |   默认值   | 描述                                            | 跳转 Demo                                        |
+| :----------: | :--------------------------: | :------: | :---------------------------------------------- | ------------------------------------------------ |
+| arrowTrigger | `'hover'\|'never'\|'always'` | 'hover'  | 可选，指定切换箭头显示方式                      | [指示器&切换箭头](#指示器切换箭头)       |
+|   autoplay   |          `boolean`           |  false   | 可选，是否自动轮播                              | [自动轮播](#自动轮播) |
+| autoplaySpeed |           `number`           |   3000   | 可选，配合`autoplay`使用，自动轮播速度，单位 ms | [自动轮播](#自动轮播) |
+|    height    |           `string`           |  '100%'  | 可选，轮播容器高度                              | [基本用法](#基本用法)    |
+|   showDots   |          `boolean`           |   true   | 可选，是否显示面板指示器                        | [自动轮播](#自动轮播) |
+| dotPosition  |      `'top'\|'bottom'`       | 'bottom' | 可选，面板指示器位置                            | [指示器&切换箭头](#指示器切换箭头)  |
+|  dotTrigger  |      `'click'\|'hover'`      | 'click'  | 可选，指示器触发轮播方式                        | [指示器&切换箭头](#指示器切换箭头)  |
+| activeIndex  |           `number`           |    0     | 可选，初始化激活卡片索引，从 0 开始，支持`[(activeIndex)]`双向绑定        | [基本用法](#基本用法)    |
+
+#### 事件
+
+|      事件          |          类型           |                    描述                     | 跳转 Demo                                                     |
+| :----------------: | :---------------------: | :-----------------------------------------: | -------------------------------------------------            |
+|      activeIndexChange    | `EventEmitter<number>`  | 卡片切换时，返回当前卡片的索引，从0开始    | [基本用法](#基本用法)             |
+
+#### 方法
+
+|    方法     | 描述                                | 跳转 Demo                       |
+| :---------: | :---------------------------------- | :----------------------------- |
+|   prev()    | 切换到上一张卡片                    | [自定义操作](#自定义操作)   |
+|   next()    | 切换到下一张卡片                    | [自定义操作](#自定义操作)   |
+| goTo(index) | 切换到指定索引的卡片，索引从 0 开始 | [自定义操作](#自定义操作)   |
+
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
@@ -41,9 +113,32 @@ import { defineComponent, ref } from 'vue'
 export default defineComponent({
   setup() {
     const items = ref<string[]>(["page 1", 'page 2', 'page 3', 'page 4'])
+    const activeIndex = ref(2)
+
+    const carousel = ref()
+
+    const onPrev = () => {
+      carousel.value?.prev?.()
+    }
+    const onNext = () => {
+      carousel.value?.next?.()
+    }
+    const onGoFirst = () => {
+      carousel.value?.goto?.(0)
+    }
+    const onChange = (index: number) => {
+      console.log(index, activeIndex.value)
+    }
 
     return {
+      activeIndex,
       items,
+
+      carousel,
+      onPrev,
+      onNext,
+      onGoFirst,
+      onChange,
     }
   }
 })
@@ -54,4 +149,14 @@ export default defineComponent({
   line-height: 200px;
   background: var(--devui-global-bg, #f3f6f8);
 }
+.carousel-demo-operate{
+    margin-top: 10px;
+
+    display: flex;
+    align-items: center;
+
+    > * {
+        margin-right: 20px;
+    }
+}
 </style>
\ No newline at end of file
-- 
Gitee