Picker 选择器

通用选择器组件，用于从预设选项中选择一个值。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定选中值，通过 range 设置选项列表。

<zq-picker v-model="value" :range="options" placeholder="请选择" />

const value = ref('')
const options = ['选项一', '选项二', '选项三']

带标签

通过 label 属性设置左侧标签文字。

<zq-picker v-model="value" label="城市" :range="cities" placeholder="请选择城市" />

对象数组

当选项为对象数组时，通过 range-key 指定显示字段，通过 value-key 指定值字段。

<zq-picker
  v-model="value"
  label="性别"
  :range="genderOptions"
  range-key="label"
  value-key="value"
  placeholder="请选择性别"
/>

const value = ref('')
const genderOptions = [
  { label: '男', value: 'male' },
  { label: '女', value: 'female' },
]

必填标记

通过 required 属性在标签前显示必填星号。

<zq-picker v-model="value" label="类型" :range="types" required placeholder="必填" />

禁用状态

通过 disabled 属性禁用选择器。

<zq-picker v-model="value" label="状态" :range="options" disabled />

错误状态

通过 error 属性标记错误状态，通过 error-message 显示错误提示。

<zq-picker
  v-model="value"
  label="类型"
  :range="options"
  error
  error-message="请选择类型"
/>

无边框

通过 border 属性控制是否显示下边框。

<zq-picker v-model="value" :range="options" :border="false" />

API

Props

参数	说明	类型	默认值
v-model	选中的值	string | number | array	''
mode	选择器模式	'selector'	'selector'
label	左侧标签文字	string	''
placeholder	占位提示文字	string	'请选择'
disabled	是否禁用	boolean	false
border	是否显示下边框	boolean	true
required	是否显示必填星号	boolean	false
error	是否标记为错误状态	boolean	false
error-message	错误提示文字	string	''
label-width	标签宽度	string	'180rpx'
range	选项列表	array	[]
range-key	选项显示字段（对象数组时使用）	string	''
value-key	选项值字段（对象数组时使用）	string	''

Events

事件名	说明	回调参数
update:modelValue	选中值变化时触发	value: string | number
change	选中值变化时触发	value: string | number

Slots

名称	说明
label	自定义左侧标签

主题定制

变量名	说明
--color-bg-card	背景色
--color-divider	下边框颜色
--color-text-primary	选中值文字颜色
--color-text-placeholder	占位文字和图标颜色
--color-error	错误状态颜色