From 37ed9bd9bafbebbcea97d2ff5557def1f012db54 Mon Sep 17 00:00:00 2001
From: dongj0316 <475586651@qq.com>
Date: Thu, 30 May 2019 15:54:22 +0800
Subject: [PATCH] [new feature] IndexBar: add highlight color (#3406)

---
 packages/index-bar/en-US.md |  1 +
 packages/index-bar/index.js | 28 ++++++++++++++++++++++++++--
 packages/index-bar/zh-CN.md |  1 +
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/index-bar/en-US.md b/packages/index-bar/en-US.md
index cc348f679..f445267aa 100644
--- a/packages/index-bar/en-US.md
+++ b/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
 
diff --git a/packages/index-bar/index.js b/packages/index-bar/index.js
index 723c8b78c..9f5d7f3cf 100644
--- a/packages/index-bar/index.js
+++ b/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>
           ))}
diff --git a/packages/index-bar/zh-CN.md b/packages/index-bar/zh-CN.md
index de4466313..4f0428d53 100644
--- a/packages/index-bar/zh-CN.md
+++ b/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