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

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>
           ))}