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>

隐藏关闭按钮

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

自定义确定按钮

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

自定义取消按钮

<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>

定制关闭按钮

<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>

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

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