feat(Overlay): add @overlay-z-index less var

This commit is contained in:
陈嘉涵 2020-01-28 11:54:11 +08:00
parent 7609389623
commit 95d19f70d1
6 changed files with 10 additions and 11 deletions

View File

@ -4,6 +4,7 @@
position: fixed;
top: 0;
left: 0;
z-index: @overlay-z-index;
width: 100%;
height: 100%;
background-color: @overlay-background-color;

View File

@ -57,13 +57,10 @@ function Overlay(
Overlay.props = {
show: Boolean,
zIndex: [Number, String],
duration: [Number, String],
className: null as any,
customStyle: Object,
zIndex: {
type: [Number, String],
default: 1,
},
};
export default createComponent<OverlayProps, OverlayEvents>(Overlay);

View File

@ -3,10 +3,10 @@
exports[`renders demo correctly 1`] = `
<div>
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">显示遮罩层</span></button>
<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade"></div>
<div class="van-overlay" style="display: none;" name="van-fade"></div>
</div>
<div><button class="van-button van-button--primary van-button--normal" style="margin-left: 16px;"><span class="van-button__text">嵌入内容</span></button>
<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade">
<div class="van-overlay" style="display: none;" name="van-fade">
<div class="wrapper">
<div class="block"></div>
</div>

View File

@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" style="z-index: 1;" name="van-fade"></div>`;
exports[`class-name prop 1`] = `<div class="van-overlay my-overlay" name="van-fade"></div>`;
exports[`custom style prop 1`] = `<div class="van-overlay" style="z-index: 1; background-color: red;" name="van-fade"></div>`;
exports[`custom style prop 1`] = `<div class="van-overlay" style="background-color: red;" name="van-fade"></div>`;
exports[`default slot 1`] = `<div class="van-overlay" style="z-index: 1; display: none;" name="van-fade">Custom Default</div>`;
exports[`default slot 1`] = `<div class="van-overlay" style="display: none;" name="van-fade">Custom Default</div>`;
exports[`duration prop 1`] = `<div class="van-overlay" style="z-index: 1; animation-duration: 1s;" name="van-fade"></div>`;
exports[`duration prop 1`] = `<div class="van-overlay" style="animation-duration: 1s;" name="van-fade"></div>`;
exports[`z-index prop 1`] = `<div class="van-overlay" style="z-index: 99;" name="van-fade"></div>`;

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" style="z-index: 100;" name="van-slide-up">
<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__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>

View File

@ -471,6 +471,7 @@
@number-keyboard-z-index: 100;
// Overlay
@overlay-z-index: 1;
@overlay-background-color: rgba(0, 0, 0, 0.7);
// Pagination