# 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

# 隐藏关闭按钮

可通过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

# 自定义确定按钮

可通过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

# 自定义取消按钮

<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

# 定制关闭按钮

<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

# 自定义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

# 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
Last updated: 2021/9/8 上午10:27:00
10:44