blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Tabbar): enable safe-area-inset-bottom by default when fixed (#5968)

Browse Source
This commit is contained in:
neverland 2020-03-31 22:16:13 +08:00 committed by GitHub
parent e929f96e04
commit afc3164364
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/calendar/index.js
View File

@ -383,11 +383,7 @@ export default createComponent({
genFooter() {
return (
<div
class={bem('footer', {
'safe-area-inset-bottom': this.safeAreaInsetBottom,
})}
>
<div class={bem('footer', { unfit: !this.safeAreaInsetBottom })}>
{this.genFooterContent()}
</div>
);

7
src/calendar/index.less
View File

@ -173,10 +173,11 @@
&__footer {
flex-shrink: 0;
padding: 0 @padding-md;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--unfit {
padding-bottom: 0;
}
}

2
src/calendar/test/__snapshots__/demo.spec.js.snap
View File

@ -171,7 +171,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"></div>
<div class="van-calendar__footer"></div>
</div>
</div>
<!---->

12
src/calendar/test/__snapshots__/index.spec.js.snap
View File

@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
</div>
`;
@ -98,7 +98,7 @@ exports[`color prop when type is single 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
</div>
`;
@ -152,7 +152,7 @@ exports[`formatter prop 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div>
`;
@ -206,7 +206,7 @@ exports[`popup wrapper 2`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
<!----></i>
</div>
@ -259,7 +259,7 @@ exports[`row-height prop 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
<div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
</div>
`;
@ -310,6 +310,6 @@ exports[`title & footer slot 1`] = `
</div>
</div>
</div>
<div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">Custom Footer</div>
<div class="van-calendar__footer">Custom Footer</div>
</div>
`;

5
src/number-keyboard/index.js
View File

@ -211,10 +211,7 @@ export default createComponent({
<div
vShow={this.show}
style={{ zIndex: this.zIndex }}
class={bem([
this.theme,
{ 'safe-area-inset-bottom': this.safeAreaInsetBottom },
])}
class={bem([this.theme, { unfit: !this.safeAreaInsetBottom }])}
onTouchstart={stopPropagation}
onAnimationend={this.onAnimationEnd}
onWebkitAnimationEnd={this.onAnimationEnd}

7
src/number-keyboard/index.less
View File

@ -6,6 +6,8 @@
left: 0;
z-index: @number-keyboard-z-index;
width: 100%;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @number-keyboard-background-color;
user-select: none;
@ -57,9 +59,8 @@
}
}
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--unfit {
padding-bottom: 0;
}
}

10
src/number-keyboard/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出默认键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--custom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--extra">.</i>
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
</div>
@ -25,14 +25,14 @@ exports[`renders demo correctly 1`] = `
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
</div>
</div>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
</div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
弹出身份证号码键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
弹出自定义标题键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>

16
src/number-keyboard/test/__snapshots__/index.spec.js.snap
View File

@ -1,50 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`extra-key slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">Custom Extra Key</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`focus on key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`focus on key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`move and blur key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`move and blur key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`move and blur key 3`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`render title 1`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
`;
exports[`title-left slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>

2
src/password-input/test/__snapshots__/demo.spec.js.snap
View File

@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
</ul>
<div class="van-password-input__info">密码为 6 位数字</div>
</div>
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" name="van-slide-up">
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
</div>
</div>

2
src/tabbar/README.zh-CN.md
View File

@ -170,7 +170,7 @@ export default {
| active-color | 选中标签的颜色 | *string* | `#1989fa` |
| inactive-color | 未选中标签的颜色 | *string* | `#7d7e80` |
| route | 是否开启路由模式 | *boolean* | `false` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei)，设置 fixed 时默认开启 | *boolean* | `false` |
### Tabbar Events

1
src/tabbar/demo/index.vue
View File

@ -127,6 +127,7 @@ export default {
.demo-tabbar {
.van-tabbar {
position: relative;
padding-bottom: 0;
}
}
</style>

17
src/tabbar/index.js
View File

@ -12,7 +12,6 @@ export default createComponent({
zIndex: [Number, String],
activeColor: String,
inactiveColor: String,
safeAreaInsetBottom: Boolean,
value: {
type: [Number, String],
default: 0,
@ -25,6 +24,20 @@ export default createComponent({
type: Boolean,
default: true,
},
safeAreaInsetBottom: {
type: Boolean,
default: null,
},
},
computed: {
fit() {
if (this.safeAreaInsetBottom !== null) {
return this.safeAreaInsetBottom;
}
// enable safe-area-inset-bottom by default when fixed
return this.fixed;
},
},
watch: {
@ -54,8 +67,8 @@ export default createComponent({
class={[
{ [BORDER_TOP_BOTTOM]: this.border },
bem({
unfit: !this.fit,
fixed: this.fixed,
'safe-area-inset-bottom': this.safeAreaInsetBottom,
}),
]}
>

7
src/tabbar/index.less
View File

@ -6,6 +6,8 @@
box-sizing: content-box;
width: 100%;
height: @tabbar-height;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
background-color: @tabbar-background-color;
&--fixed {
@ -14,8 +16,7 @@
left: 0;
}
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
&--unfit {
padding-bottom: 0;
}
}