uni-app 多功能选择器组件 cxl-picker 详解

前言

在表单录入、筛选条件、日期选择等场景中，一个好用且灵活的选择器组件是必不可少的。今天介绍 cxl-picker —— 一个功能全面的 uni-app 选择器组件，支持单选、多列联动、日期选择等多种模式。

组件特性

四种模式
：单选(selector)、多列联动(multiSelector)、非联动(unlinkedSelector)、日期选择(dateSelector)
多列联动
：支持省市区等层级数据的联动选择
日期选择
：支持年/月/日/时/分/秒，可自定义格式
丰富插槽
：header-top、header-bottom、picker-top、picker-bottom 等
安全区适配
：safeAreaInsetBottom 适配 iPhone 底部安全区
inline 模式
：支持内联显示
loading / empty
：内置加载和空数据状态

快速开始

<cxl-pickerref=”picker”mode=”selector”:list=”['北京','上海','广州']” @confirm=”onConfirm”> <button>选择城市</button></cxl-picker>

实战示例

示例1：单选选择器

<cxl-picker mode=”selector” :list=”['北京','上海','广州','深圳']” @confirm=”onConfirm”> <button>选择城市</button></cxl-picker>

示例2：多列联动（省市区三级）

<cxl-pickermode=”multiSelector”:list=”areaList”:level=”3” @confirm=”onConfirm”> <button>选择地区</button></cxl-picker><script>export default { data() { return { areaList: [ { label: '广东省', children: [ { label: '深圳市', children: [{ label: '南山区' }, { label: '福田区' }] } ]} ] } }}</script>

示例3：日期选择器

<cxl-pickermode=”dateSelector”format=”YYYY-MM-DD”displayFormat=”YYYY-MM-DD” @confirm=”onConfirm”> <button>选择日期</button></cxl-picker>

属性速查

属性	类型	默认值	说明
mode	String	`'selector'`	selector/multiSelector/unlinkedSelector/dateSelector
list	Array	`[]`	数据源
level	Number	`1`	联动层级（multiSelector 模式）
format	String	`'YYYY-MM-DD'`	日期格式（dateSelector）
loading	Boolean	`false`	加载状态
inline	Boolean	`false`	内联模式
cancelText	String	`'取消'`	取消按钮文字
confirmText	String	`'确定'`	确定按钮文字

总结

cxl-picker 是一个功能强大的选择器组件，四种模式覆盖了绝大部分选择场景。多列联动、日期选择、丰富的插槽系统让它足以应对复杂的业务需求。

Gitee 地址

👉 https://gitee.com/hszcxl/TestUniapp/tree/cxl-picker

如果觉得本文对你有帮助，欢迎点赞、评论、转发支持！