@belleui/belle-modal
v0.0.1-alpha.2
Published
[](#belleuibelle-modal)
Downloads
7
Readme
@belleui/belle-modal
Preview
Install
npm install @belleui/belle-modal
Useage
Basic Useage
<belle-modal
title="Basic Modal"
.visible="${false}"
@onOk=${handleOk}
@onCancel=${handleCancel}
>
<div style="width: 500px;">
<p>弹窗的内容</p>
<p>弹窗的内容</p>
<p>弹窗的内容</p>
<p>弹窗的内容</p>
<p>...</p>
</div>
</belle-modal>Properties
| Property | Attribute | Type | Default | Description |
|----------------|----------------|--------------------------|---------|---------------------------|
| cancelText | cancelText | string | "取消" | 取消按钮文字 |
| closable | closable | boolean | true | 是否显示右上角关闭按钮 |
| footer | footer | TemplateResult \| null | "" | 自定义footer，为null时不显示footer |
| maskClosable | maskClosable | boolean | true | 是否允许点击蒙层关闭 |
| modalMask | | HTMLElement | | |
| okText | okText | string | "确认" | 确认按钮文字 |
| title | title | string | "" | 弹窗标题 |
| visible | visible | boolean | false | 是否显示弹窗 |
Methods
| Method | Type |
|----------------|------------|
| handleCancel | (): void |
| handleOk | (): void |
Events
| Event | Description |
|------------|----------------|
| onCancel | 点击确定的回调函数 |
| onOk | 关闭弹窗和点击取消的回调函数 |