[improvement] IndexBar: add default highlight color and more less vars

This commit is contained in:
陈嘉涵 2019-05-30 16:04:10 +08:00
parent 37ed9bd9ba
commit d67cec269f
7 changed files with 19 additions and 8 deletions

View File

@ -4,7 +4,8 @@
##### IndexBar ##### IndexBar
- 新增`sticky`参数 - 新增`sticky`属性
- 新增`highlight-color`属性
##### Notify ##### Notify

View File

@ -26,6 +26,7 @@ export default sfc({
if (this.sticky) { if (this.sticky) {
return { return {
top: `${this.top}px`, top: `${this.top}px`,
color: this.parent.highlightColor,
zIndex: `${this.parent.zIndex}` zIndex: `${this.parent.zIndex}`
}; };
} }

View File

@ -2,18 +2,19 @@
.van-index-anchor { .van-index-anchor {
padding: @index-anchor-padding; padding: @index-anchor-padding;
color: @index-anchor-text-color;
font-weight: @index-anchor-font-weight; font-weight: @index-anchor-font-weight;
font-size: @index-anchor-font-size; font-size: @index-anchor-font-size;
line-height: @index-anchor-line-height; line-height: @index-anchor-line-height;
background-color: transparent; background-color: @index-anchor-background-color;
transition: background-color .2s; transition: color @index-anchor-transition-duration,
background-color @index-anchor-transition-duration;
&--sticky { &--sticky {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 1; background-color: @index-anchor-sticky-background-color;
background-color: #fff;
} }
} }

View File

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

View File

@ -1,6 +1,7 @@
import { use } from '../utils'; import { use } from '../utils';
import { TouchMixin } from '../mixins/touch'; import { TouchMixin } from '../mixins/touch';
import { ParentMixin } from '../mixins/relation'; import { ParentMixin } from '../mixins/relation';
import { GREEN } from '../utils/color';
import { on, off } from '../utils/event'; import { on, off } from '../utils/event';
import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll'; import { getScrollTop, getElementTop, getScrollEventTarget } from '../utils/scroll';
@ -18,7 +19,10 @@ export default sfc({
type: Number, type: Number,
default: 1 default: 1
}, },
highlightColor: String, highlightColor: {
type: String,
default: GREEN
},
indexList: { indexList: {
type: Array, type: Array,
default() { default() {

View File

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

View File

@ -243,9 +243,13 @@
// IndexAnchor // IndexAnchor
@index-anchor-padding: 0 15px; @index-anchor-padding: 0 15px;
@index-anchor-text-color: @text-color;
@index-anchor-font-weight: 500; @index-anchor-font-weight: 500;
@index-anchor-font-size: 14px; @index-anchor-font-size: 14px;
@index-anchor-line-height: 32px; @index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-background-color: @white;
@index-anchor-transition-duration: .2s;
// IndexBar // IndexBar
@index-bar-index-font-size: 10px; @index-bar-index-font-size: 10px;