# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 自定义高度

可通过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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 顶部操作栏

通过 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 显示标题

可通过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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 显示取消按钮

可通过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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 自定义底部按钮

可通过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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 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 确认选择 -
Last updated: 2022/3/26 上午11:31:42
10:44