前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载SegmentPicker 是 Cube UIVue 移动端 UI 组件库中用于串联多个独立选择器的多段选择组件典型场景如选择时间段2010年9月1日 - 2014年6月30日或快递 - 寄件地址 - 收件地址这类分步表单。本文以组件官方文档为主线结合仓库源码系统讲解 SegmentPicker 的用法、Props、事件、实例方法及其底层联动原理读完你可以在自己的 Vue 移动端项目中快速实现多段联动选择并深入理解其运行机制。组件概览为什么需要 SegmentPicker在移动端表单中经常需要用户连续完成多步选择例如入学时间 → 毕业时间时间段选择快递公司 → 寄件地址 → 收件地址分步填写物流信息如果直接用多个独立 Picker 依次弹出开发者需要自行维护哪个选择器显示中每步选了什么值等状态而 Cube UI 的 SegmentPicker 将多个 Picker 组件串成一个选择流程内部自动管理步骤切换、结果收集与按钮文案开箱即用。SegmentPicker 自1.7.0版本新增官方文档标注 1.7.0 新增组件源码位于 src/components/segment-picker/segment-picker.vue模块入口在 src/modules/segment-picker/index.js。使用前提官方文档特别注明SegmentPicker 基于 create-api 实现使用前请先了解 create-api 文档。create-api 允许通过this.$createSegmentPicker({...})以编程方式创建实例配合show()/hide()方法控制显隐无需在模板中手写组件标签。基本用法两个 DatePicker 实现时间段选择模板与调用代码官方文档给出的基本示例是使用两个cube-date-picker拼接入学时间 → 毕业时间cube-button clickshowDateSegmentPickerStartDate - EndDate/cube-buttonconst dateSegmentData [ { is: cube-date-picker, title: 入学时间, min: new Date(2000, 0, 1), max: new Date(2030, 11, 31) }, { is: cube-date-picker, title: 毕业时间, min: new Date(2000, 0, 1), max: new Date(2030, 11, 31) } ] export default { mounted () { this.dateSegmentPicker this.$createSegmentPicker({ data: dateSegmentData, onSelect: (selectedDates, selectedVals, selectedTexts) { this.$createDialog({ type: warn, content: Selected Items: br/ - 入学时间: ${selectedTexts[0].join()} br/ - 毕业时间: ${selectedTexts[1].join()}, icon: cubeic-alert }).show() }, onNext: (i, selectedDate, selectedValue, selectedText) { dateSegmentData[1].min selectedDate if (i 0) { this.dateSegmentPicker.$updateProps({ data: dateSegmentData }) } } }) }, methods: { showDateSegmentPicker() { this.dateSegmentPicker.show() } } }代码拆解与数据流data数组定义每个节点选择器。每一项就是一个独立选择器的配置对象is字段指定用哪种 Picker 组件可以是 Cube UI 的 Picker 类组件如cube-date-picker、cube-cascade-picker、cube-picker也可以是自己实现的 Picker 组件。官方示例 example/pages/segment-picker.vue 与文档完全一致。this.$createSegmentPicker({...})创建实例。这是 create-api 注入到 Vue 原型上的方法配置对象中的onXxx写法对应组件的事件监听。创建的实例保存在this.dateSegmentPicker后续通过show()方法弹出。onSelect收集最终结果。当用户完成最后一个节点的选择并点击确认后触发三个参数都是数组分别对应每个节点选择器的 select 事件参数selectedDates各节点选中的值数组这里即两个 Date 对象selectedVals各节点选中的 value 数组selectedTexts各节点选中的展示文本数组由于每个节点可能选择多项如日期选择器通常返回 年/月/日 三项所以selectedTexts[0].join()将第一段的选择文本拼接成完整字符串。onNext实现联动。点击下一步进入下一节点时触发回调参数i是当前选择器的索引后续参数是该节点 select 事件的参数。上例中dateSegmentData[1].min selectedDate // 结束时间的最小值 已选的开始时间当i 0离开第一个节点时通过this.dateSegmentPicker.$updateProps({ data: dateSegmentData })把更新后的数据推回组件第二个 DatePicker 的min即被限制为已选开始时间实现结束时间不能早于开始时间的业务约束。注意文档示例中data被定义为模块级常量dateSegmentData直接修改其属性并回传正是为了演示这种下一步动态更新后一节点配置的联动模式。进阶用法快递 - 寄件地址 - 收件地址三段式选择官方文档的第二个示例展示了三种不同类型的节点混合普通cube-picker快递公司 两个cube-cascade-picker省市区级联地址。cube-button clickshowCitySegmentPickerExpress - From - To/cube-buttonimport { provinceList, cityList, areaList } from example/data/area const cityData provinceList cityData.forEach(province { province.children cityList[province.value] province.children.forEach(city { city.children areaList[city.value] }) }) export default { mounted () { this.citySegmentPicker this.$createSegmentPicker({ data: [{ title: 选择快递, data: [expressData], selectedIndex: [1] }, { is: cube-cascade-picker, title: 寄件地址, data: cityData, selectedIndex: [0, 0, 0], cancelTxt: 返回 }, { is: cube-cascade-picker, title: 收件地址, data: cityData, selectedIndex: [0, 0, 0] }], cancelTxt: Cancel, confirmTxt: Confirm, nextTxt: Next, prevTxt: Prev, onSelect: (selectedVals, selectedIndexs, selectedTexts) { this.$createDialog({ type: warn, content: Selected Items: br/ - 所选快递: ${selectedTexts[0].join()} br/ - 寄件地址: ${selectedTexts[1].join()} br/ - 收件地址: ${selectedTexts[2].join()}, icon: cubeic-alert }).show() } }) }, methods: { showCitySegmentPicker() { this.citySegmentPicker.show() } } }关键点分析is字段缺省时默认为cube-picker。第一个节点只写了title/data/selectedIndex没有is在源码 segment-picker.vue 中对应:isitem.is || cube-picker即默认渲染普通单列 Picker。expressData定义于 example/data/picker.js顺丰/中通/圆通三个选项。级联地址数据构造。provinceList/cityList/areaList来自 example/data/area.js通过给province.children cityList[...]、city.children areaList[...]的方式组装成三级树形结构直接喂给cube-cascade-picker的data。每个节点可独立设置文案。第二段的cancelTxt: 返回会覆盖全局的cancelTxt: Cancel。源码 segment-picker.vue 的:cancel-txtitem.cancelTxt || (index 0 ? _cancelTxt : _prevTxt)表明节点级配置优先否则首节点用全局取消文案、后续节点用上一步文案。selectedIndex设置默认选中。如selectedIndex: [0, 0, 0]表示省/市/区默认选中各自第一项这是级联选择器自身的属性。Props 配置详解顶层 Props官方文档表格 源码补充| 参数 | 说明 | 类型 | 默认值 | 示例 | | - | - | - | - | - | | data | 定义各个选择器的组件名和属性数组项结构见下节 | Array | [] | - | | nextTxt | 下一步按钮文案 | String | 下一步 | - | | prevTxt | 上一步按钮文案 | String | 下一步 | - | | title | 标题 | String | | - | | subtitle1.8.1| 副标题 | String | | - | | cancelTxt | 取消按钮文案 | String | 取消 | - | | confirmTxt | 确定按钮文案 | String | 确定 | - | | swipeTime1.8.1| 快速滑动选择器滚轮时惯性滚动动画的时长单位ms | Number | 2500 | - | | visible1.8.1| 显示状态是否可见。v-model绑定值 | Boolean | true/false | false | | maskClosable1.9.6| 点击蒙层是否隐藏 | Boolean | true/false | true | | zIndex1.9.6| 样式 z-index 的值 | Number | 100 | - |源码补充说明nextTxt/prevTxt在 segment-picker.vue 中默认值为空字符串实际显示文案通过_nextTxt/_prevTxt计算属性回退到多语言this.$t(next)/this.$t(prev)见 locale mixin未设置时由内置语言包提供默认中文下一步。title/subtitle/cancelTxt/confirmTxt/swipeTime/maskClosable等属性来自 picker mixin其中swipeTime默认值2500、maskClosable默认值true都在 mixin 中定义。visible走 visibility mixin 的v-model协议prop: visible事件toggle支持cube-segment-picker v-modelvisible双向控制显隐。data 子配置项| 参数 | 说明 | 类型 | 默认值 | 示例 | | - | - | - | - | - | | is | 该节点选择器的组件名 | String | cube-picker | cube-date-picker | | 其它 | 该节点选择器的属性 | - | - | - |重要节点的is会默认注入若干属性。源码模板 segment-picker.vue 对每个节点渲染component :isitem.is || cube-picker并依次注入title节点级item.title优先否则用顶层titlesubtitle同理confirmTxt节点级优先若当前是最后一个节点index data.length - 1用顶层确认文案否则用顶层下一步文案_nextTxtcancelTxt节点级优先首节点用顶层取消文案非首节点用上一步文案_prevTxtswipeTime节点级优先否则顶层值zIndex节点级优先否则顶层值maskClosable直接透传顶层值最后v-binditem把节点配置中其余属性如data、min、max、selectedIndex等全部透传给具体选择器组件这解释了为什么快递节点即使不写is也能正常渲染——它实际被渲染成默认的cube-picker并继承了顶层的cancelTxt/confirmTxt等配置。事件机制与内部流转官方文档事件表| 事件名 | 说明 | 参数1 | 参数2 | 参数3 | | - | - | - | - | - | | select | 点击确认按钮触发此事件 | 各个选择器的 select 事件的参数1Array 类型 | 各个选择器的 select 事件的参数2Array 类型 | 各个选择器的 select 事件的参数3Array 类型 | | cancel | 点击取消按钮触发此事件 | - | - | - | | next | 点击下一步按钮触发此事件 | 当前 picker 的索引Number类型 | 其余参数为当前 picker select 时间的参数 | ··· | ··· | | prev | 点击上一步按钮触发此事件 | 当前 picker 的索引Number类型 | - | - | - | | change | 滚轴滚动后触发此事件 | pickerIndex: 当前滚动 picker 的索引Number类型 | index: 当前滚动列索引Number类型 | selectedIndex: 当前列选中项的索引Number类型 |源码实现的状态机组件内部通过current维护当前步骤结合_select/_cancel/_change三个内部方法驱动流转segment-picker.vue_select某个节点点击确认/下一步_selected(...args) { this.selectedVal[this.current] args[0] this.selectedIndex[this.current] args[1] this.selectedText[this.current] args[2] if (this.current this.data.length - 1) { this.$emit(EVENT_NEXT, this.current, ...args) this.current this.currentPicker.show() } else { this.isVisible false this.$emit(EVENT_SELECT, this.selectedVal, this.selectedIndex, this.selectedText) this.current 0 } }先把当前节点的三组结果value/index/text存入对应数组位置若非最后一个节点触发next事件携带当前索引i及该节点 select 参数供业务做联动current并显示下一个节点选择器若是最后一个节点关闭整体弹层触发select事件并把三个收集数组整体传出重置current 0。_cancel某个节点取消/上一步if (this.current 0) { this.$emit(EVENT_PREV, this.current, ...args) this.current-- this.currentPicker.show() } else { this.isVisible false this.$emit(EVENT_CANCEL) }非首节点点击取消实际是上一步触发prev事件参数为当前索引current--回到上一节点并显示首节点点击取消才真正关闭整体弹层并触发cancel事件。_change滚轮滚动直接把current作为第一个参数透传触发change事件即change事件签名中的pickerIndex就是当前步骤索引。currentPicker计算属性通过遍历this.$refs.pickers找到$attrs.index this.current的组件实例用于调用其show()/hide()。源码注释特别提醒$refs不具备响应性因此该计算属性依赖this.data保持响应式触发。实例方法与 v-model 控制| 方法名 | 说明 | | - | - | | show | 显示 | | hide | 隐藏 |show()/hide()在 segment-picker.vue 中除了切换isVisible还会同步调用this.currentPicker.show()/hide()确保当前步骤的选择器真正弹出/收起当data为空时直接忽略调用。visibleprop 支持v-model1.8.1 起由 visibility mixin 实现监听visible变化调用show()/hide()同时isVisible变化时向外部发射toggle事件。编程式创建时$createSegmentPickercreate-api 还提供$updateProps方法用于运行时更新配置——文档联动示例中就是用它对data的修改实现了第二个 DatePicker 最小值的实时更新。与 create-api 的集成原理SegmentPicker 的模块注册在 src/modules/segment-picker/index.jsSegmentPicker.install function (Vue) { Vue.component(Picker.name, Picker) Vue.component(CascadePicker.name, CascadePicker) Vue.component(SegmentPicker.name, SegmentPicker) Locale.install(Vue) addPicker(Vue, Picker) addCascadePicker(Vue, CascadePicker) addSegmentPicker(Vue, SegmentPicker) }安装时会一并注册cube-picker和cube-cascade-picker两个基础组件并注入对应 API保证即使业务只引入 SegmentPicker也能完整渲染所有节点类型。addSegmentPickersrc/modules/segment-picker/api.js调用createAPIsrc/common/helpers/create-api.js声明了[select, cancel, change, next, prev]五个事件作为编程式回调并在before钩子中提示SegmentPicker component can not be a singleton——即该组件不支持单例复用每次调用都会创建独立实例因为内部状态current、三组收集数组与步骤流转强绑定不能共享。因此在项目中使用时既可以通过组件标签cube-segment-picker声明式使用配合v-model也可以像官方文档示例那样通过this.$createSegmentPicker({...})编程式使用后者更契合点击按钮后弹出多步选择的移动端交互习惯。小结与适用建议适用场景连续多步、多节点的选择流程尤其是时间段起点-终点多级地址等强先后顺序、可能需要节点间联动的表单交互。联动范式在onNext/next事件回调里修改后续节点配置如修改min/max、更新data再通过$updateProps回写即可实现前一步决定后一步取值范围的典型业务规则。组合自由节点类型由is决定默认cube-picker可混用cube-date-picker、cube-cascade-picker甚至自定义 Picker 组件形成灵活的任意 Picker 编排能力。版本注意subtitle/swipeTime/visible需 1.8.1maskClosable/zIndex需 1.9.6组件本身自 1.7.0 起提供使用前请核对你的 cube-ui 版本。配套的完整可运行示例位于 example/pages/segment-picker.vue含两个官方演示场景组件源码 src/components/segment-picker/segment-picker.vue 是本组件行为的最权威参考遇到疑问时可对照源码与文档表逐项核实。赞分享前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载相关推荐NocoBase 级联选择字段树表数据的多级联动选择实现与配置详解NocoBase 级联选择字段树表数据的多级联动选择实现与配置详解 级联选择CascadeSelect是 NocoBase 界面搭建中专门面向树表关系低代码后端前端人工智能AI 应用工作流自动化Element UI级联选择Cascader多级联动选择器Element UI级联选择Cascader多级联动选择器 Element UI级联选择器Cascader是一个功能强大的多级联动选择组件特别适用于处理前端UI组件设计系统3分钟解锁暗黑破坏神2存档编辑可视化工具终极使用指南3分钟解锁暗黑破坏神2存档编辑可视化工具终极使用指南 还在为复杂的暗黑2存档修改而烦恼吗d2s editor是一款基于Web的开源暗黑破坏神2存档编辑器它UI组件前端设计系统上一篇超星学习通自动签到3分钟掌握智能签到完整指南下一篇【终极指南】Git图形化神器SourceGit告别命令行困扰的5大秘诀创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
