# Popup 弹窗
请扫码查看示例
# 介绍
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
# 引入
通过以下方式来引入组件
- 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
- 在要使用该组件的页面中使用element标签引入该组件。
# 代码演示
# 基本用法
通过设置 active 属性，可以控制蒙层是否显示。
<element name="m-popup" src="@/node_modules/mui-minix/src/popup/index"></element>
<m-popup active="{{active}}" @m-close="onClose">
<div class="win">
<text class="text white">content from popup at bottom</text>
</div>
</m-popup>
1
2
3
4
5
6
2
3
4
5
6
export default {
data() {
return {
active: true
};
},
onClose(){
this.active = false
}
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.win {
width: 100%;
height: 80px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text {
font-size: 14px;
}
.white {
color: #ffffff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 弹窗位置
通过设置 position 属性，可以控制弹窗的弹出位置。目前支持 bottom top left right center5个位置。默认为 bottom。
<element name="m-popup" src="@/node_modules/mui-minix/src/popup/index"></element>
<m-popup active="{{active}}" position="center" @m-close="onClose">
<div class="win">
<text class="text white">content from popup at center</text>
</div>
</m-popup>
1
2
3
4
5
6
2
3
4
5
6
export default {
data() {
return {
active: true
};
},
onClose(){
this.active = false
}
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.win {
width: 100px;
height: 80px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text {
font-size: 14px;
}
.white {
color: #ffffff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Api
# Prop
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
active | 是否显示遮罩层 | boolean | false | 是 |
position | 弹窗位置, 可选值为: bottom top left right center | string | bottom | 否 |
z-index | z 轴排序 | number | 1030 | 否 |
close-on-click-overlay | 点击遮罩层时是否关闭 | boolean | true | 否 |
# Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
m-close | 点击时触发 | - |
# Slots
| 插槽名称 | 说明 |
|---|---|
default | 自定义弹窗内容 |