# Modal 弹窗
用于消息通知等确认,获取用户反馈。
# 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
# 示例
# 基本用法
v-model
控制弹窗的显示
title
设置弹窗标题
content
设置弹窗内容
<template>
<pi-button type="primary" @click="baseUsed = true">
显示模态窗
</pi-button>
<pi-modal v-model="baseUsed" />
</template>
<script>
export default {
data() {
return {
baseUsed: false
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 隐藏关闭按钮
可通过cancel-btn
配置关闭按钮,cancelBtn配置项
<template>
<pi-button type="primary" @click="baseUsed = true">
显示模态窗
</pi-button>
<pi-modal
v-model="hideCancelBtn"
title="温馨提示"
content="暂无数据"
:cancel-btn="{
show: false
}"
/>
</template>
<script>
export default {
data() {
return {
hideCancelBtn: false
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 自定义确定按钮
可通过confirm-btn
配置确认按钮,confirmBtn配置项
<template>
<pi-button type="primary" @click="customConfirmBtn = true">
显示模态窗
</pi-button>
<pi-modal
v-model="customConfirmBtn"
title="温馨提示"
content="是否要删除"
:confirm-btn="{
text: '删除',
bgColor: '#ff508a'
}"
confirm-text="删除"
confirm-bg-color="#ff0000"
/>
</template>
<script>
export default {
data() {
return {
customConfirmBtn: false
}
}
}
</script>
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
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
# 自定义取消按钮
<template>
<pi-button type="primary" @click="customCancelBtn = true">
显示模态窗
</pi-button>
<pi-modal
v-model="customCancelBtn"
title="温馨提示"
content="自定义取消按钮"
:cancel-btn="{
text: '删除',
color: '#ffffff',
bgColor: '#ff508a'
}"
:confirm-btn="{
text: '更新'
}"
/>
</template>
<script>
export default {
data() {
return {
customCancelBtn: false
}
}
}
</script>
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
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
# 定制关闭按钮
<template>
<pi-button type="primary" @click="customCloseBtn = true">
显示模态窗
</pi-button>
<pi-modal
v-model="customCloseBtn"
title="温馨提示"
content="定制关闭按钮"
:popup="{
closeIcon: {
name: 'back',
color: '#333333',
position: 'tl',
size: '32'
}
}"
/>
</template>
<script>
export default {
data() {
return {
customCloseBtn: false
}
}
}
</script>
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
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
# 自定义slot
<template>
<pi-button type="primary" @click="customSlot = true">
显示模态窗
</pi-button>
<pi-modal v-model="customSlot" title="请选择时间">
<pi-calendar-panel v-model="customSlotValue" />
</pi-modal>
</template>
<script>
export default {
data() {
return {
customSlotValue: '2020-08-08',
customSlot: false
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Props
名称 | 描述 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
value | 初始值 | — | false | - |
customStyle | 自定义样式 | Object | false | {} |
customClass | 自定义样式类 | String | false | '' |
onCancelClose | 点击取消的时候是否关闭弹窗 | Boolean | false | true |
onConfirmClose | 点击确认的时候是否关闭弹窗 | Boolean | false | true |
showTitle | 是否显示title | Boolean | false | true |
title | 标题 | String | false | '弹出选择' |
titlePadding | 标题 padding | String /Number | false | '32rpx' |
width | 弹窗宽度 不带单位 则默认rpx | Number /String | false | 600 |
content | 弹窗内容 | String | false | '内容' |
contentStyle | 内容的样式 | Object | false | {} |
confirmBtn | 确认按钮的配置 | Object | false | confirmBtn配置项 |
cancelBtn | 关闭按钮的配置 | Object | false | cancelBtn配置项 |
popup | 弹窗的配置 | Object | false | popup配置项 |
# ConfirmBtn Props
提示
以下属性覆盖pi-button
配置,其余属性参考button配置项
名称 | 描述 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
show | 是否显示确认按钮 | Boolean | false | true |
text | 确认文案 | String | false | '确认' |
width | 确认按钮宽度 | String | Number | false | 100% |
type | 确认按钮预置样式 | 'default' 'primary' 'warn' 'secondary' 'line' | false | 'primary' |
# CancelBtn Props
提示
以下属性覆盖pi-button
配置,其余属性参考button配置项
名称 | 描述 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
show | 是否显示取消按钮 | Boolean | false | true |
text | 取消文案 | String | false | '取消' |
width | 取消按钮宽度 | String | Number | false | 100% |
type | 取消按钮预置样式 | 'default' 'primary' 'warn' 'secondary' 'line' | false | 'secondary' |
# Events
事件名 | 描述 | 参数 |
---|---|---|
close | 点击关闭按钮时触发 | - |
cancel | 点击取消按钮时触发 | - |
confirm | 点击确定按钮时触发 | - |
# Slots
名称 | 描述 | 插槽内容 |
---|---|---|
title | title | - |
default | 内容插槽 | - |
footer | 按钮区域 | - |
# Methods
Method | Description | Parameters |
---|---|---|
handleCancel | 取消选择 | - |
handleConfirm | 确认选择 | - |
# MixIns
MixIn |
---|
ValueSync |