blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-10 14:39:45 +08:00
Code Issues Projects Releases Wiki Activity

feat(IndexBar): add @index-anchor-z-index、@index-bar-sidebar-z-index less var

Browse Source
This commit is contained in:
陈嘉涵 2020-01-28 12:01:39 +08:00
parent 95d19f70d1
commit 89ee8e3872
6 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/index-anchor/index.less
View File

@ -1,6 +1,7 @@
@import '../style/var'; @import '../style/var';
.van-index-anchor { .van-index-anchor {
z-index: @index-anchor-z-index;
box-sizing: border-box; box-sizing: border-box;
padding: @index-anchor-padding; padding: @index-anchor-padding;
color: @index-anchor-text-color; color: @index-anchor-text-color;

17
src/index-bar/index.js
View File

@ -1,5 +1,5 @@
// Utils // Utils
import { createNamespace } from '../utils'; import { createNamespace, isDef } from '../utils';
import { GREEN } from '../utils/constant'; import { GREEN } from '../utils/constant';
import { isHidden } from '../utils/dom/style'; import { isHidden } from '../utils/dom/style';
import { preventDefault } from '../utils/dom/event'; import { preventDefault } from '../utils/dom/event';
@ -43,14 +43,11 @@ export default createComponent({
], ],
props: { props: {
zIndex: Number,
sticky: { sticky: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
zIndex: {
type: Number,
default: 1,
},
highlightColor: { highlightColor: {
type: String, type: String,
default: GREEN, default: GREEN,
@ -72,6 +69,14 @@ export default createComponent({
}, },
computed: { computed: {
sidebarStyle() {
if (isDef(this.zIndex)) {
return {
zIndex: this.zIndex + 1,
};
}
},
highlightStyle() { highlightStyle() {
const { highlightColor } = this; const { highlightColor } = this;
if (highlightColor) { if (highlightColor) {
@ -237,7 +242,7 @@ export default createComponent({
<div class={bem()}> <div class={bem()}>
<div <div
class={bem('sidebar')} class={bem('sidebar')}
style={{ zIndex: this.zIndex + 1 }} style={this.sidebarStyle}
onClick={this.onClick} onClick={this.onClick}
onTouchstart={this.touchStart} onTouchstart={this.touchStart}
onTouchmove={this.onTouchMove} onTouchmove={this.onTouchMove}

1
src/index-bar/index.less
View File

@ -5,6 +5,7 @@
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 0; right: 0;
z-index: @index-bar-sidebar-z-index;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;

2
src/index-bar/test/__snapshots__/demo.spec.js.snap
View File

@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-tabs__content"> <div class="van-tabs__content">
<div role="tabpanel" class="van-tab__pane" style=""> <div role="tabpanel" class="van-tab__pane" style="">
<div class="van-index-bar"> <div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div> <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div> <div>
<div> <div>
<div class="van-index-anchor">A</div> <div class="van-index-anchor">A</div>

10
src/index-bar/test/__snapshots__/index.spec.js.snap
View File

@ -2,7 +2,7 @@
exports[`custom anchor text 1`] = ` exports[`custom anchor text 1`] = `
<div class="van-index-bar"> <div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div> <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div> <div>
<div class="van-index-anchor">Title A</div> <div class="van-index-anchor">Title A</div>
</div> </div>
@ -14,7 +14,7 @@ exports[`custom anchor text 1`] = `
exports[`scroll and update active anchor 1`] = ` exports[`scroll and update active anchor 1`] = `
<div class="van-index-bar"> <div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div> <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">A</span><span data-index="B" class="van-index-bar__index">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div data-index="0"> <div data-index="0">
<div class="van-index-anchor">1</div> <div class="van-index-anchor">1</div>
</div> </div>
@ -32,12 +32,12 @@ exports[`scroll and update active anchor 1`] = `
exports[`scroll and update active anchor 2`] = ` exports[`scroll and update active anchor 2`] = `
<div class="van-index-bar"> <div class="van-index-bar">
<div class="van-index-bar__sidebar" style="z-index: 2;"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div> <div class="van-index-bar__sidebar"><span data-index="A" class="van-index-bar__index" style="">A</span><span data-index="B" class="van-index-bar__index van-index-bar__index--active" style="color: rgb(7, 193, 96);">B</span><span data-index="C" class="van-index-bar__index">C</span><span data-index="D" class="van-index-bar__index">D</span><span data-index="E" class="van-index-bar__index">E</span><span data-index="F" class="van-index-bar__index">F</span><span data-index="G" class="van-index-bar__index">G</span><span data-index="H" class="van-index-bar__index">H</span><span data-index="I" class="van-index-bar__index">I</span><span data-index="J" class="van-index-bar__index">J</span><span data-index="K" class="van-index-bar__index">K</span><span data-index="L" class="van-index-bar__index">L</span><span data-index="M" class="van-index-bar__index">M</span><span data-index="N" class="van-index-bar__index">N</span><span data-index="O" class="van-index-bar__index">O</span><span data-index="P" class="van-index-bar__index">P</span><span data-index="Q" class="van-index-bar__index">Q</span><span data-index="R" class="van-index-bar__index">R</span><span data-index="S" class="van-index-bar__index">S</span><span data-index="T" class="van-index-bar__index">T</span><span data-index="U" class="van-index-bar__index">U</span><span data-index="V" class="van-index-bar__index">V</span><span data-index="W" class="van-index-bar__index">W</span><span data-index="X" class="van-index-bar__index">X</span><span data-index="Y" class="van-index-bar__index">Y</span><span data-index="Z" class="van-index-bar__index">Z</span></div>
<div data-index="0" style="height: 10px;"> <div data-index="0" style="height: 10px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div> <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 0px, 0); color: rgb(7, 193, 96);">1</div>
</div> </div>
<div data-index="1" style="height: 10px;"> <div data-index="1" style="height: 10px;">
<div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: 1; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div> <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom" style="z-index: undefined; transform: translate3d(0, 10px, 0); color: rgb(7, 193, 96);">2</div>
</div> </div>
<div data-index="2"> <div data-index="2">
<div class="van-index-anchor">3</div> <div class="van-index-anchor">3</div>

2
src/style/var.less
View File

@ -369,6 +369,7 @@
@goods-action-button-danger-color: @gradient-red; @goods-action-button-danger-color: @gradient-red;
// IndexAnchor // IndexAnchor
@index-anchor-z-index: 1;
@index-anchor-padding: 0 @padding-md; @index-anchor-padding: 0 @padding-md;
@index-anchor-text-color: @text-color; @index-anchor-text-color: @text-color;
@index-anchor-font-weight: @font-weight-bold; @index-anchor-font-weight: @font-weight-bold;
@ -378,6 +379,7 @@
@index-anchor-sticky-background-color: @white; @index-anchor-sticky-background-color: @white;
// IndexBar // IndexBar
@index-bar-sidebar-z-index: 2;
@index-bar-index-font-size: @font-size-xs; @index-bar-index-font-size: @font-size-xs;
@index-bar-index-line-height: 14px; @index-bar-index-line-height: 14px;