feat(Tabbar): add @tabbar-z-index less var

This commit is contained in:
陈嘉涵 2020-01-28 11:50:50 +08:00
parent a2d870ad8e
commit 0441f7ba09
5 changed files with 16 additions and 17 deletions

View File

@ -687,6 +687,7 @@
// Tabbar // Tabbar
@tabbar-height: 50px; @tabbar-height: 50px;
@tabbar-z-index: 1;
@tabbar-background-color: @white; @tabbar-background-color: @white;
// TabbarItem // TabbarItem

View File

@ -9,6 +9,7 @@ export default createComponent({
props: { props: {
route: Boolean, route: Boolean,
zIndex: Number,
activeColor: String, activeColor: String,
inactiveColor: String, inactiveColor: String,
safeAreaInsetBottom: Boolean, safeAreaInsetBottom: Boolean,
@ -24,10 +25,6 @@ export default createComponent({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
zIndex: {
type: Number,
default: 1,
},
}, },
watch: { watch: {

View File

@ -1,6 +1,7 @@
@import '../style/var'; @import '../style/var';
.van-tabbar { .van-tabbar {
z-index: @tabbar-z-index;
display: flex; display: flex;
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;

View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>
@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>
@ -111,7 +111,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png"> <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
<div class="van-info">3</div> <div class="van-info">3</div>
@ -135,7 +135,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);"> <div class="van-tabbar-item van-tabbar-item--active" style="color: rgb(7, 193, 96);">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>
@ -167,7 +167,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o"> <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
<!----></i> <!----></i>

View File

@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed" style="z-index: 1;"></div>`; exports[`disable border 1`] = `<div class="van-tabbar van-tabbar--fixed"></div>`;
exports[`route mode 1`] = ` exports[`route mode 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->
@ -40,7 +40,7 @@ exports[`route mode 1`] = `
`; `;
exports[`route mode 2`] = ` exports[`route mode 2`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->
@ -77,7 +77,7 @@ exports[`route mode 2`] = `
`; `;
exports[`route mode 3`] = ` exports[`route mode 3`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->
@ -114,7 +114,7 @@ exports[`route mode 3`] = `
`; `;
exports[`route mode match by name 1`] = ` exports[`route mode match by name 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item van-tabbar-item--active"> <div class="van-tabbar-item van-tabbar-item--active">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->
@ -135,7 +135,7 @@ exports[`route mode match by name 1`] = `
`; `;
exports[`route mode match by name 2`] = ` exports[`route mode match by name 2`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->
@ -156,7 +156,7 @@ exports[`route mode match by name 2`] = `
`; `;
exports[`watch tabbar value 1`] = ` exports[`watch tabbar value 1`] = `
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<!----> <!---->