mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] IndexBar: add default highlight color and more less vars
This commit is contained in:
parent
37ed9bd9ba
commit
d67cec269f
@ -4,7 +4,8 @@
|
|||||||
|
|
||||||
##### IndexBar
|
##### IndexBar
|
||||||
|
|
||||||
- 新增`sticky`参数
|
- 新增`sticky`属性
|
||||||
|
- 新增`highlight-color`属性
|
||||||
|
|
||||||
##### Notify
|
##### Notify
|
||||||
|
|
||||||
|
@ -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}`
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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() {
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user