[new feature] IndexBar: add highlight color (#3406)

packages/index-bar/en-US.md

@@ -65,6 +65,7 @@ export default {
 | index-list | Index List | `Array` | `A-Z` |
 | z-index | z-index | `Number` | `1` |
 | sticky | Whether to enable anchor sticky top | `Boolean` | `true` |
+| highlight-color | Index character highlight color | `String` | - | - |
 
 ### IndexAnchor Props
 

packages/index-bar/index.js

@@ -18,6 +18,7 @@ export default sfc({
       type: Number,
       default: 1
     },
+    highlightColor: String,
     indexList: {
       type: Array,
       default() {
@@ -33,6 +34,24 @@ export default sfc({
     }
   },
 
+  data() {
+    return {
+      activeAnchorIndex: -1
+    };
+  },
+
+  computed: {
+    highlightStyle() {
+      const { highlightColor } = this;
+      if (highlightColor) {
+        /* istanbul ignore else */
+        return {
+          color: highlightColor
+        };
+      }
+    }
+  },
+
   mounted() {
     this.scroller = getScrollEventTarget(this.$el);
     this.handler(true);
@@ -72,6 +91,7 @@ export default sfc({
 
       const active = this.getActiveAnchorIndex(scrollTop, rects);
 
+      this.activeAnchorIndex = active;
       this.children.forEach((item, index) => {
         if (index === active) {
           item.active = true;
@@ -150,8 +170,12 @@ export default sfc({
           onTouchend={this.onTouchEnd}
           onTouchcancel={this.onTouchEnd}
         >
-          {this.indexList.map(index => (
-            <span class={bem('index')} data-index={index}>
+          {this.indexList.map((index, idx) => (
+            <span
+              class={bem('index')}
+              style={idx === this.activeAnchorIndex ? this.highlightStyle : null}
+              data-index={index}
+            >
               {index}
             </span>
           ))}

packages/index-bar/zh-CN.md

@@ -69,6 +69,7 @@ export default {
 | index-list | 索引字符列表 | `Array` | `A-Z` | - |
 | z-index | z-index 层级 | `Number` | `1` | - |
 | sticky | 是否开启锚点自动吸顶 | `Boolean` | `true` | - |
+| highlight-color | 索引字符高亮颜色 | `String` | - | - |
 
 ### IndexAnchor Props