[improvement] Swipe: add indicator color prop (#2110)

packages/swipe/demo/index.vue

@@ -1,7 +1,10 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-swipe :autoplay="3000">
+      <van-swipe
+        :autoplay="3000"
+        indicator-color="white"
+      >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
         <van-swipe-item>3</van-swipe-item>
@@ -21,7 +24,10 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-swipe @change="onChange">
+      <van-swipe
+        indicator-color="white"
+        @change="onChange"
+      >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>
         <van-swipe-item>3</van-swipe-item>
@@ -33,6 +39,7 @@
       <van-swipe
         vertical
         :autoplay="3000"
+        indicator-color="white"
         class="demo-swipe--vertical"
       >
         <van-swipe-item>1</van-swipe-item>
@@ -47,6 +54,7 @@
         :autoplay="3000"
         :width="300"
         :loop="false"
+        indicator-color="white"
       >
         <van-swipe-item>1</van-swipe-item>
         <van-swipe-item>2</van-swipe-item>

packages/swipe/en-US.md

@@ -13,7 +13,7 @@ Vue.use(Swipe).use(SwipeItem);
 Use `autoplay` prop to set autoplay interval
 
 ```html
-<van-swipe :autoplay="3000">
+<van-swipe :autoplay="3000" indicator-color="white">
   <van-swipe-item>1</van-swipe-item>
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
@@ -128,7 +128,8 @@ export default {
 | loop | Whether to enable loop | `Boolean` | `true` |
 | vertical | Vertical Scrolling | `Boolean` | `false` |
 | touchable | Whether touchable | `Boolean` | `true` |
-| show-indicators | Whether to show indocators | `Boolean` | `true` |
+| show-indicators | Whether to show indicators | `Boolean` | `true` |
+| indicator-color | Indicator color | `String` | `#1989fa` |
 | initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` |
 | width | Set Swiper Item Width | `Number` | `0` |
 | height | Set Swiper Item Height | `Number` | `0` |

packages/swipe/index.less

@@ -30,17 +30,19 @@
   }
 
   &__indicator {
+    opacity: .3;
     border-radius: 100%;
-    background-color: @gray-dark;
+    background-color: @blue;
     width: @swipe-indicator;
     height: @swipe-indicator;
+    transition: opacity .2s;
 
     &:not(:last-child) {
       margin-right: @swipe-indicator;
     }
 
     &--active {
-      background-color: @orange;
+      opacity: 1;
     }
   }
 }

packages/swipe/index.vue

@@ -19,6 +19,7 @@
         <i
           v-for="index in count"
           :class="b('indicator', { active: index - 1 === activeIndicator })"
+          :style="indicatorStyle"
         />
       </div>
     </slot>
@@ -40,6 +41,7 @@ export default create({
     height: Number,
     autoplay: Number,
     vertical: Boolean,
+    indicatorColor: String,
     loop: {
       type: Boolean,
       default: true
@@ -144,6 +146,12 @@ export default create({
         transitionDuration: `${this.swiping ? 0 : this.duration}ms`,
         transform: `translate${this.vertical ? 'Y' : 'X'}(${this.offset}px)`
       };
+    },
+
+    indicatorStyle() {
+      return {
+        backgroundColor: this.indicatorColor
+      };
     }
   },
 

packages/swipe/zh-CN.md

@@ -13,7 +13,7 @@ Vue.use(Swipe).use(SwipeItem);
 通过`autoplay`属性设置自动轮播间隔
 
 ```html
-<van-swipe :autoplay="3000">
+<van-swipe :autoplay="3000" indicator-color="white">
   <van-swipe-item>1</van-swipe-item>
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
@@ -128,6 +128,7 @@ export default {
 | initial-swipe | 初始位置索引值 | `Number` | `0` | - |
 | loop | 是否开启循环播放 | `Boolean` | `true` | - |
 | show-indicators | 是否显示指示器 | `Boolean` | `true` | - |
+| indicator-color | 指示器颜色 | `String` | `#1989fa` | 1.4.5 |
 | vertical | 是否为纵向滚动 | `Boolean` | `false` | 1.1.1 |
 | touchable | 是否可以通过手势滑动 | `Boolean` | `true` | 1.1.1 |
 | width | 滑块宽度 | `Number` | `0` | 1.2.1 |