From 5bb259b9f4fdfcfae08c725e36b75b6b95b3ea96 Mon Sep 17 00:00:00 2001
From: ElsaOOo <yjjjng0901@126.com>
Date: Fri, 12 Nov 2021 22:57:11 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E6=94=B9carousel=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E4=B8=BA=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F,=E4=BF=AE=E5=A4=8D=E6=96=87=E6=A1=A3=E4=B8=AD?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=93=8D=E4=BD=9C=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E5=93=8D=E5=BA=94=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/carousel/index.md         | 238 ++++++++++--------
 1 file changed, 134 insertions(+), 104 deletions(-)

diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md
index ad99fbec..c1f64507 100644
--- a/packages/devui-vue/docs/components/carousel/index.md
+++ b/packages/devui-vue/docs/components/carousel/index.md
@@ -7,116 +7,128 @@
 1. 用于展示图片或者卡片。
 
 ### 基本用法
-<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>
-
-```html
-<d-carousel height="200px">
-  <d-carousel-item v-for="item in items" :key="item">{{ item }} </d-carousel-item>
-</d-carousel>
-```
-```css
+
+:::demo
+
+```vue
+<template>
+  <d-carousel height="200px">
+    <d-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-carousel-item {
   text-align: center;
   line-height: 200px;
   background: var(--devui-global-bg, #f3f6f8);
 }
+</style>
 ```
+
+:::
+
 ### 指示器&切换箭头
-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>
+arrowTrigger 设为 always 可以使箭头永久显示，dotTrigger 设为 hover 可以使 hover 到点上就切换。
 
-```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 :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 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;
+:::demo
 
-    display: flex;
-    align-items: center;
+```vue
+<template>
+  <d-carousel height="200px" arrowTrigger="always" dotTrigger="hover">
+    <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
+  </d-carousel>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
 
-    > * {
-        margin-right: 20px;
+export default defineComponent({
+  setup() {
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
+    return {
+      items
     }
+  }
+})
+</script>
+<style>
+.d-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
 }
+</style>
 ```
 
-### 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
 
-|      事件          |          类型           |                    描述                     | 跳转 Demo                                                     |
-| :----------------: | :---------------------: | :-----------------------------------------: | -------------------------------------------------            |
-|      activeIndexChange    | `EventEmitter<number>`  | 卡片切换时，返回当前卡片的索引，从0开始    | [基本用法](#基本用法)             |
+```vue
+<template>
+  <d-carousel height="200px" autoplay :autoplaySpeed="3000">
+    <d-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-carousel-item {
+  text-align: center;
+  line-height: 200px;
+  background: var(--devui-global-bg, #f3f6f8);
+}
+</style>
+```
 
-|    方法     | 描述                                | 跳转 Demo                       |
-| :---------: | :---------------------------------- | :----------------------------- |
-|   prev()    | 切换到上一张卡片                    | [自定义操作](#自定义操作)   |
-|   next()    | 切换到下一张卡片                    | [自定义操作](#自定义操作)   |
-| goTo(index) | 切换到指定索引的卡片，索引从 0 开始 | [自定义操作](#自定义操作)   |
+:::
 
+### 自定义操作
 
+:::demo
+
+```vue
+<template>
+  <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" @click="onPrev">上一张</d-button>
+    <d-button bsStyle="primary" @click="onNext">下一张</d-button>
+    <d-button bsStyle="common" @click="onGoFirst">第一张</d-button>
+  </div>
+</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'])
-    const activeIndex = ref(2)
-
+    const items = ref<string[]>(['page 1', 'page 2', 'page 3', 'page 4'])
     const carousel = ref()
-
     const onPrev = () => {
       carousel.value?.prev?.()
     }
@@ -126,37 +138,55 @@ export default defineComponent({
     const onGoFirst = () => {
       carousel.value?.goto?.(0)
     }
-    const onChange = (index: number) => {
-      console.log(index, activeIndex.value)
-    }
-
     return {
-      activeIndex,
       items,
-
       carousel,
       onPrev,
       onNext,
-      onGoFirst,
-      onChange,
+      onGoFirst
     }
   }
 })
 </script>
-<style lang="scss">
-.d-carousel-item {
-  text-align: center;
-  line-height: 200px;
-  background: var(--devui-global-bg, #f3f6f8);
+<style>
+.carousel-demo-operate {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
 }
-.carousel-demo-operate{
-    margin-top: 10px;
+.carousel-demo-operate .devui-btn-host {
+  margin-right: 20px;
+}
+</style>
+```
 
-    display: flex;
-    align-items: center;
+:::
 
-    > * {
-        margin-right: 20px;
-    }
-}
-</style>
\ No newline at end of file
+### 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 开始 | [自定义操作](#自定义操作) |
-- 
Gitee