# 4.14 选择器（Select Picker）

底部弹出选择器组件

# 基础用法

<template>
  <dof-select-picker :show="showPicker" :button="buttons" @dofPopupButtonClicked="onButtonClicked"></dof-select-picker>
</template>
1
2
3

# Attributes

Prop Type Required Default Description
show Boolean N false 是否显示
pos String N 'bottom' 弹出位置
popupColor String N '' 弹窗背景颜色
overlayCfg Object N {"hasAnimation":true,"timingFunction":["ease-in","ease-out"],"duration":300,"opacity":0.3} 遮罩层配置
height Number | String N 840 高度
stand-out Number | String N 0 突出高度
width Number | String N 750 宽度
animation Object N {"timingFunction":"cubic-bezier(0.25, 0.1, 0.25, 1.0)"} 动画配置
button Array N [] 按钮配置
needDarkMode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
btnGapColor String N '' 按钮间隔背景色
btnBgColor String N '' 按钮背景色
textColor String N '' 文字颜色
cancelTextColor String N '' 取消按钮文字颜色
confirmTextColor String N '' 确认按钮文字颜色
dividerColor String N '' 分隔线颜色
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

RTL 下侧向弹层及内部横向布局镜像；pos=left 从右侧弹出，pos=right 从左侧弹出，关闭回调仍返回传入的 pos。

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

# Events

事件名 说明 回调参数
dofPopupButtonClicked 点击按钮 { index, text }
dofPopupOverlayClicked 弹层关闭后触发 { pos }