SelectDate 日期选择器

参数

参数	说明	类型	可选值	默认值
pt	样式穿透配置	PassThrough	-	-
modelValue	绑定值	string / number / boolean	-	-
title	选择器标题	string	-	'请选择'
placeholder	选择器占位符	string	-	'请选择'
options	选项数据	ClSelectOption[]	-	[]
showTrigger	是否显示选择器触发器	boolean	-	true
disabled	是否禁用选择器	boolean	-	false
columnCount	列数	number	-	1
splitor	分隔符	string	-	' - '
confirmText	确认按钮文本	string	-	'确定'
showConfirm	是否显示确认按钮	boolean	-	true
cancelText	取消按钮文本	string	-	'取消'
showCancel	是否显示取消按钮	boolean	-	true

事件

事件名称	说明	回调参数
change	绑定值变化时触发的事件	value

方法

方法名	说明	参数
open	打开弹窗	callback: (value: any) => void
close	关闭弹窗

PassThrough

样式穿透配置对象，用于深度自定义组件内部元素的样式。

参数	说明	类型
trigger	选择器样式配置	ClSelectTriggerPassThrough
popup	弹窗样式配置	ClPopupPassThrough

type ClSelectTriggerPassThrough = {
	className?: string;
	icon?: ClIconProps;
	placeholder?: PassThroughProps;
	text?: ClTextProps;
};

示例

基础用法

最简单的选择器用法，从预定义的选项中选择一个值。

<template>
	<cl-select v-model="val" :options="options" placeholder="请选择技术栈"></cl-select>
</template>

<script setup lang="ts">
import { type ClSelectOption } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref(1);

const options = ref<ClSelectOption[]>([
	{
		label: "HTML",
		value: 1
	},
	{
		label: "CSS",
		value: 2
	},
	{
		label: "JavaScript",
		value: 3
	},
	{
		label: "Node.js",
		value: 4
	},
	{
		label: "Vue.js",
		value: 5
	},
	{
		label: "React",
		value: 6
	}
]);
</script>

手动控制弹窗

通过调用组件的 open 方法手动打开选择弹窗，适用于自定义触发器的场景。

<template>
	<view>
		<cl-button @click="openSelect">打开选择器</cl-button>
		<cl-select
			ref="selectRef"
			v-model="val"
			:options="options"
			:show-trigger="false"
		></cl-select>
	</view>
</template>

<script setup lang="ts">
import { type ClSelectOption } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const selectRef = ref();
const val = ref(1);

const options = ref<ClSelectOption[]>([
	{
		label: "HTML",
		value: 1
	},
	{
		label: "CSS",
		value: 2
	},
	{
		label: "JavaScript",
		value: 3
	},
	{
		label: "Node.js",
		value: 4
	},
	{
		label: "Vue.js",
		value: 5
	},
	{
		label: "React",
		value: 6
	}
]);

function openSelect() {
	selectRef.value!.open((value) => {
		console.log("选择的值:", value);
	});
}
</script>

多列级联选择

通过配置 column-count 和 children 实现多列级联选择，常用于地区选择等场景。

<template>
	<cl-select
		v-model="val"
		:options="options"
		:column-count="3"
		title="选择地区"
		placeholder="请选择省市区"
	></cl-select>
</template>

<script setup lang="ts">
import { type ClSelectOption } from "@/uni_modules/cool-ui";
import { ref } from "vue";

const val = ref();

const options = ref<ClSelectOption[]>([
	{
		label: "福建省",
		value: "fujian",
		children: [
			{
				label: "福州市",
				value: "fuzhou",
				children: [
					{
						label: "鼓楼区",
						value: "gulou"
					},
					{
						label: "台江区",
						value: "taijiang"
					},
					{
						label: "仓山区",
						value: "cangshan"
					},
					{
						label: "马尾区",
						value: "mawei"
					}
				]
			},
			{
				label: "厦门市",
				value: "xiamen",
				children: [
					{
						label: "思明区",
						value: "siming"
					},
					{
						label: "湖里区",
						value: "huli"
					},
					{
						label: "集美区",
						value: "jimei"
					},
					{
						label: "海沧区",
						value: "haicang"
					}
				]
			},
			{
				label: "泉州市",
				value: "quanzhou",
				children: [
					{
						label: "鲤城区",
						value: "licheng"
					},
					{
						label: "丰泽区",
						value: "fengze"
					},
					{
						label: "洛江区",
						value: "luojiang"
					},
					{
						label: "泉港区",
						value: "quangang"
					}
				]
			}
		]
	},
	{
		label: "浙江省",
		value: "zhejiang",
		children: [
			{
				label: "杭州市",
				value: "hangzhou",
				children: [
					{
						label: "上城区",
						value: "shangcheng"
					},
					{
						label: "下城区",
						value: "xiacheng"
					},
					{
						label: "江干区",
						value: "jianggan"
					},
					{
						label: "拱墅区",
						value: "gongshu"
					}
				]
			},
			{
				label: "宁波市",
				value: "ningbo",
				children: [
					{
						label: "海曙区",
						value: "haishu"
					},
					{
						label: "江北区",
						value: "jiangbei"
					},
					{
						label: "北仑区",
						value: "beilun"
					}
				]
			}
		]
	},
	{
		label: "湖南省",
		value: "hunan",
		children: [
			{
				label: "长沙市",
				value: "changsha",
				children: [
					{
						label: "芙蓉区",
						value: "furong"
					},
					{
						label: "天心区",
						value: "tianxin"
					},
					{
						label: "岳麓区",
						value: "yuelu"
					}
				]
			},
			{
				label: "株洲市",
				value: "zhuzhou",
				children: [
					{
						label: "荷塘区",
						value: "hetang"
					},
					{
						label: "芦淞区",
						value: "lusong"
					}
				]
			}
		]
	},
	{
		label: "江西省",
		value: "jiangxi",
		children: [
			{
				label: "南昌市",
				value: "nanchang",
				children: [
					{
						label: "东湖区",
						value: "donghu"
					},
					{
						label: "西湖区",
						value: "xihu"
					},
					{
						label: "青云谱区",
						value: "qingyunpu"
					}
				]
			},
			{
				label: "九江市",
				value: "jiujiang",
				children: [
					{
						label: "浔阳区",
						value: "xunyang"
					},
					{
						label: "濂溪区",
						value: "lianxi"
					}
				]
			}
		]
	}
]);
</script>