# Model
弹出层
案例
import { defineComponent } from "vue";
import { Button, Model } from "sl-vue2-template";
export default defineComponent({
data() {
return {
show: false,
};
},
methods: {
onClose() {
this.show = !this.show;
},
},
render() {
return (
<div>
<Button handlerClick={this.onClose}>open</Button>
<Model show={this.show} handlerClose={this.onClose}>
<Model.Head>标题</Model.Head>
<Model.Content>内容</Model.Content>
<Model.Foot justify="center">
<Button.Primary handlerClick={this.onClose}>确定</Button.Primary>
<Button.Text handlerClick={this.onClose}>取消</Button.Text>
</Model.Foot>
</Model>
</div>
);
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| show | 可见 | Boolean | 是 | false | -- |
| width | 弹出层的宽度 | Number | 否 | -- | -- |
| animation | 动画效果 | Boolean | 否 | true | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerClose | 关闭的回调 | () => void | 是 | -- |