PopupSelect 弹出选择

弹出层选择

提示

1. 组件只提供弹出容器，内容自行通过slot传入
2. 组件需要设置高度height属性，如需内容自动撑开，请设置height: 'auto'

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基础用法

可通过v-model | value设定是否显示弹出层

<template>
  <pi-button type="primary" @click="baseUsed = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="baseUsed" />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: false
    }
  }
}
</script>

自定义高度

可通过height设定弹出层高度

<template>
  <pi-button type="primary" @click="customHeight = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="customHeight" height="400rpx" />
</template>

<script>
export default {
  data() {
    return {
      customHeight: false
    }
  }
}
</script>

顶部操作栏

通过 toolbar-position 属性设置操作栏位置，默认底部，有以下位置可供选择：

1. top: 上方（默认）
2. bottom: 底部
3. none: 不显示

<template>
  <pi-button type="primary" @click="toolbarPosition = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="toolbarPosition" toolbar-position="top" />
</template>

<script>
export default {
  data() {
    return {
      toolbarPosition: false
    }
  }
}
</script>

显示标题

可通过showTitle：设置是否显示标题

<template>
  <pi-button type="primary" @click="showTitle = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="showTitle" show-title />
</template>

<script>
export default {
  data() {
    return {
      showTitle: false
    }
  }
}
</script>

显示取消按钮

可通过cancelBtn：设置取消按钮的样式

<template>
  <pi-button type="primary" @click="showCancelBtn = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select v-model="showCancelBtn" :cancel-btn="{ show: true }" />
</template>

<script>
export default {
  data() {
    return {
      showCancelBtn: false
    }
  }
}
</script>

自定义底部按钮

可通过confirmBtn：设置确定按钮的样式 可通过cancelBtn：设置取消按钮的样式

<template>
  <pi-button type="primary" @click="customBtns = true">
    显示弹出选择
  </pi-button>
  <pi-popup-select
    v-model="customBtns"
    :confirm-btn="{ show: true, type: 'warn', round: true }"
    :cancel-btn="{ show: true, type: 'line', round: true }"
  />
</template>

<script>
export default {
  data() {
    return {
      customBtns: false
    }
  }
}
</script>

Props

名称	描述	类型	必选	默认值
value	是否显示弹出层	—	false	-
customStyle	自定义样式	Object	false	{}
customClass	自定义样式类	String	false	''
toolbarPosition	工具条位置	'bottom', 'top', 'none'	false	'bottom'
showTitle	是否显示title	Boolean	false	false
title	标题	String	false	'弹出选择'
titlePadding	标题 padding	String | Number	false	'32rpx'
height	弹出选择层的高度	String	false	'50%'
onCancelClose	点击取消的时候是否关闭弹窗	Boolean	false	true
onConfirmClose	点击确认的时候是否关闭弹窗	Boolean	false	true
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	弹窗即将关闭	-
closed	弹窗已经关闭	-
cancel	取消选择	-
confirm	确认选择	-
change	弹窗切换显示状态	-

Slots

名称	描述	插槽内容
default	弹窗内容	-

Methods

Method	Description	Parameters
handleCancel	取消选择	-
handleConfirm	确认选择	-