build: build 2.0.0-alpha.23

Author: chuanshuoye

docs/2.0.0/carousel.md

@@ -47,6 +47,7 @@
 <za-carousel
   ref="carousel"
   direction="left"
+  :swipeable="false"
   loop
   @changeStart="handleChangeStart"
   @changeEnd="handleChangeEnd"
@@ -72,7 +73,7 @@
 :::demo 自动轮播
 
 ```html
-<za-carousel direction="left" loop auto-play>
+<za-carousel direction="left" :swipeable="false" loop auto-play>
   <za-carousel-item :key="index" v-for="(i, index) in ITEMS">
     <div class="carousel-item-pic">
       <img :src="i.url" :alt="i.img" :draggable="false" />
@@ -136,7 +137,8 @@ export default {
 | direction               | string         | 'left' | 'left', 'right', 'top', 'bottom' | 滑动方向                       |
 | height                  | number, string |        |                                  | 高度                           |
 | loop                    | boolean        | false  |                                  | 是否循环                       |
-| active-ndex             | number         | 0      |                                  | 当前页面的索引                 |
+| active-index             | number         | 0      |                                  | 当前页面的索引                 |
+| swipeable               | boolean        | true   |                                  | 是否可拖拽                     |
 | auto-play               | boolean        | false  |                                  | 是否自动轮播                   |
 | auto-play-interval-time | number         | 3000   |                                  | 自动轮播时间间隔，单位：毫秒   |
 | move-distance-ratio     | number         | 0.5    |                                  | 移动距离比例临界点             |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zarm-vue",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.23",
   "description": "zarm in vue",
   "tags": [
     "zarm",

src/carousel/src/carousel.vue

@@ -35,6 +35,10 @@ export default {
       type: Number,
       default: 300,
     },
+    swipeable: {
+      type: Boolean,
+      default: true,
+    },
     autoPlay: {
       type: Boolean,
       default: false,
@@ -106,6 +110,8 @@ export default {
   },
   methods: {
     onDragStart() {
+      // 如果禁用滑动，屏蔽drag行为
+      if (!this.swipeable) return;
       this.scrolling = false;
       // 如果正好在transition动画中，跳转到头尾
       const activeIndex = this.currentActiveIndex;
@@ -120,6 +126,9 @@ export default {
       this.pauseAutoPlay();
     },
     onDragMove(event, { offsetX, offsetY }) {
+      // 如果禁用滑动，屏蔽drag行为
+      if (!this.swipeable) return;
+
       const distanceX = Math.abs(offsetX);
       const distanceY = Math.abs(offsetY);
 
@@ -158,6 +167,9 @@ export default {
     },
 
     onDragEnd(event, { offsetX, offsetY, startTime }) { // eslint-disable-line no-unused-vars
+      // 如果禁用滑动，屏蔽drag行为
+      if (!this.swipeable) return;
+
       if (this.scrolling ||
           (!offsetX && !offsetY)
       ) {