mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] IndexBar: add z-index prop
This commit is contained in:
parent
7522712de7
commit
caa4a65668
@ -63,6 +63,7 @@ export default {
|
|||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
|------|------|------|------|
|
|------|------|------|------|
|
||||||
| index-list | Index List | `Array` | `A-Z` |
|
| index-list | Index List | `Array` | `A-Z` |
|
||||||
|
| z-index | z-index | `Number` | `1` |
|
||||||
|
|
||||||
### IndexAnchor Props
|
### IndexAnchor Props
|
||||||
|
|
||||||
|
@ -8,6 +8,10 @@ export default sfc({
|
|||||||
mixins: [TouchMixin, ParentMixin('vanIndexBar')],
|
mixins: [TouchMixin, ParentMixin('vanIndexBar')],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
indexList: {
|
indexList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default() {
|
default() {
|
||||||
@ -74,6 +78,7 @@ export default sfc({
|
|||||||
<div class={bem()}>
|
<div class={bem()}>
|
||||||
<div
|
<div
|
||||||
class={bem('sidebar')}
|
class={bem('sidebar')}
|
||||||
|
style={{ zIndex: this.zIndex }}
|
||||||
onClick={this.onClick}
|
onClick={this.onClick}
|
||||||
onTouchstart={this.onTouchStart}
|
onTouchstart={this.onTouchStart}
|
||||||
onTouchmove={this.onTouchMove}
|
onTouchmove={this.onTouchMove}
|
||||||
|
@ -5,7 +5,6 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tab__pane" style="">
|
<div class="van-tab__pane" style="">
|
||||||
<div class="van-index-bar">
|
<div class="van-index-bar">
|
||||||
<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 class="van-index-bar__sidebar" style="z-index: 1;"><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">A</div>
|
<div class="van-index-anchor">A</div>
|
||||||
<div class="van-cell">
|
<div class="van-cell">
|
||||||
|
@ -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"><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" style="z-index: 1;"><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-anchor">Title A</div>
|
<div class="van-index-anchor">Title A</div>
|
||||||
<div class="van-index-anchor">Title B</div>
|
<div class="van-index-anchor">Title B</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -67,6 +67,7 @@ export default {
|
|||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||||
|------|------|------|------|------|
|
|------|------|------|------|------|
|
||||||
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
|
| index-list | 索引字符列表 | `Array` | `A-Z` | - |
|
||||||
|
| z-index | z-index 层级 | `Number` | `1` | - |
|
||||||
|
|
||||||
### IndexAnchor Props
|
### IndexAnchor Props
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user