PickerSelect 选择器表单控件

专门为配合表单组件c-form而设计，用于扩展c-picker组件mode="tree"。

使用时需要通过openPicker事件和c-picker组件绑定使用，详细用法请看下方示例。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	标识，事件中返回	All
modelValue	Number,String,Array		默认选中的“value”值	All
options	Array	[]	引用的picker列数据 格式：[{label:'标题',value:1,children:[]},...] 如果为：['选项1','选项2','选项N']格式，将转化为标准格式	All
optionsLevel	String,Number	null	选项数据层级 默认从第一条数据第一个children中计算 值为1时modelValue为一个数字或字符串	All
disabled	Boolean	false	是否禁用	All
disabledBgColor	String	c-bg-base	禁用背景色 支持c-bg-的类	All
readonly	Boolean	false	是否只读	All
prompt	Boolean,String	false	默认选项名	All
pickerRef	String		绑定到页面c-picker组件的ref名 选项式api必须传递，组合式api使用usePickerSelect(pickerObj)此项可不传	All
placeholder	String	请选择	水印	All
placeholderColor	String	c-t-placeholder	水印颜色	All
title	String,Object		标题 object请c-text组件的pros	All
delimiter	String	,	label的分隔符	All
labelName	String	label	列数据label字段名设置	All
valueName	String	value	列数据value字段名设置	All
childrenName	String	children	列数据children字段名设置	All
rightIcon	String,Boolean	arrow-right	显示右侧的箭头	All
iconProps	Object	{}	右侧图标配置	All
pickerProps	Object	{}	picker配置	All
textProps	Object	{}	文字配置 参考c-text组件的props	All
required	Boolean,Number,String	false	是否必选，为数字时表示必选的列数	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明
update:modelValue
openPicker	传递用于打开picker的props
change	value,res
closePicker	{name}

插槽

插槽名	说明
before	前置
default	文本后面，icon图标前面
after	后置

组件依赖

本组件依赖c-calendar组件，使用前请先引入，并通过calendarSelectMixin进行绑定。

组合式Api：

<script setup>
import {usePickerSelect} from "../../uni_modules/cook-uni/components/c-picker-select/pickerSelectMixin";
const picker = ref(null);
const onPickerSelectOpen = usePickerSelect(picker);
</script>

选项式Api：

<script>
    import pickerSelectMixin from "../../uni_modules/cook-uni/components/c-picker-select/pickerSelectMixin";
    export default {
        mixins:[pickerSelectMixin]
    }
</script>

绑定组件：

<c-picker-select @openPicker="onPickerSelectOpen" />

示例

<template>
    <c-form :model="formData">
        <c-form-item label="选择器" prop="sex">
            <!--使用组件-->
            <c-picker-select v-model="formData.sex" :options="sexOptions" @openPicker="onPickerSelectOpen" />
        </c-form-item>
    </c-form>

    <!--picker组件，必须-->
    <c-picker ref="picker" />
</template>
<script setup>
import {usePickerSelect} from "../../uni_modules/cook-uni/components/c-picker-select/pickerSelectMixin";

// 绑定picker组件
const picker = ref(null);
const onPickerSelectOpen = usePickerSelect(picker);

const sexOptions = [
    {label:'男',value:1},
    {label:'女',value:2},
];
const formData = {
    sex:''
}
</script>