该组件是 js 级别的组件，提供一个 webView 全屏的遮罩层，并且支持将组件内的容器渲染到 body 区域。通常配合 Animate 一起使用。 如果开发者的页面使用了 natvie Header，modal 将不能够覆盖在 header 上方，如有这种需求，请使用 layout 组件包裹。
import { View, Modal, Button, Page } from "@qnpm/yis/components";
import { PageCore } from "@qnpm/yis";
import styles from "./main.css";
export default class Modaldemo extends PageCore {
state = {
showState: false
};
render() {
return (
<Page>
<Button label="展示 modal" onTouchTap={() =>{
this.setState({
showState: true
})
}}/>
<Modal
displayState={this.state.showState}
onTouchMask={()=>{
this.setState({
showState: false
})
}}
onShow={()=>{
console.log('show')
}}
onHide={()=>{
console.log('hide')
}}
>
<div className={styles.modalContent}>这里展示内容</div>
</Modal>
</Page>
);
}
}
--modal-background-color: color(var(--palette-grey-600) alpha(-10%));
--modal-animation-in-timing-function: ease-in;
--modal-animation-out-timing-function: ease-out;
--modal-animation-time: .3s;
--modal-animation-remove-delay: 0;
--modal-animation-in: 'fade-in';
--modal-animation-out: 'fade-out';
modal 组件会在蒙版隐藏后移除组件，Modal 内部有 Animate 组件需要延时请修改该变量，如果 Modal 组件存在多个形态，请写在 theme 下写样式文件作为 theme 传给 modal。
import { View, Modal, Button, Page, Animate } from "@qnpm/yis/components";
import { PageCore } from "@qnpm/yis";
import styles from "./main.css";
export default class Modaldemo extends PageCore {
state = {
showPopup: false
};
render() {
return (
<Page>
<Button label="展示 Popup" onTouchTap={() =>{
this.setState({
showPopup: true
})
}}/>
<Modal
displayState={this.state.showPopup}
onTouchMask={()=>{
this.setState({
showPopup: false
})
}}
onShow={()=>{
console.log('show')
}}
onHide={()=>{
console.log('hide')
}}
>
<Animate
on={this.state.showPopup}
>
<div className={styles.modalContent}>这里展示内容</div>
</Animate>
</Modal>
</Page>
);
}
}
| 参数名 | 类型 | 必选 | 默认值 | 描述 |
|---|---|---|---|---|
| displayState | boolean | √ | 无 | 显示隐藏状态 |
| className | string | × | 无 | 根节点类名 |
| onTouchMask | function | × | 无 | 点击浮层事件 |
| onShow | function | × | 无 | 展示时事件 |
| onHide | function | × | 无 | 隐藏时事件 |