cube-ui Toolbar 工具栏组件完全指南：actions 操作项与 moreActions 双层展开实战

前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载cube-ui 的 Toolbar工具栏组件1.9.0 新增用于在移动端页面底部组合展示一组操作按钮支持普通按钮操作与复选框操作混排并通过moreActions将工具栏扩展为可展开/收起的双层结构。本文基于 Toolbar 官方文档 与仓库源码完整讲解其配置项、事件与底层实现帮助你直接在业务页面中落地使用。组件定位一个固定在底部的操作聚合栏从 toolbar.vue 的样式代码可以看到.cube-toolbar采用position: fixed固定在视口底部左右各留 10px 边距、底部留 10px 间距z-index: 2并调用safe-area-mixin(padding-bottom, bottom)适配 iPhone X 等设备的底部安全区。它适合承载完成订单确认提交更多操作这类高频底部动作一个工具栏即可组合多个按钮也可混入复选框操作。组件层级上cube-toolbar由cube-toolbar-item内部再组合cube-button与cube-checkbox构成源码参见 toolbar.vue 与 toolbar-item.vue。基础使用用 actions 定义一组操作最简用法是把每个操作项作为对象传入actions数组并在click中统一处理点击cube-toolbar :actionsactions clickclickHandler/cube-toolbarexport default { data() { return { money: 10, actions: [ { text: 完成订单, action: showText }, { text: 打车来接, checked: false, type: checkbox }, { text: 一口价span classorange10元/span, action: moreMoney } ] } }, methods: { showText(item) { this.$createToast({ type: correct, txt: clicked item.text, time: 1000 }).show() }, moreMoney(item) { this.money 10 item.text 一口价span classorange this.money 元/span }, clickHandler(item) { if (item.action) { thisitem.action } } } }.orange color: #fc9153关键点说明每个操作项的text支持 HTML 字符串文档明确标注 support html string示例中通过span classorange10元/span高亮价格文案配合上述 stylus 将价格渲染为品牌橙色#fc9153。从 toolbar-item.vue 的实现可见非 checkbox 类型的文本会走span v-htmlaction.text渲染因此 HTML 标签会被真正解析而不是以纯文本输出。action字段只是你自定义的指令名并不会被组件直接调用。官方推荐的模式是在clickHandler中读取item.action再调用组件外部对应名称的方法如thisitem.action这样操作项与业务逻辑解耦新增操作只需加一条配置。点击事件会回传当前操作项对象item因此你可以在回调中直接读取或修改item的字段如moreMoney中累加金额并重写item.text实现动态文案。完整可运行的示例页面位于 example/pages/toolbar.vue其中还用switch-option演示了动态开关moreActions的写法。更多操作moreActions 展开双层工具栏当传入moreActions时工具栏会自动在基本操作右侧追加一个更多按钮cubeic-more图标点击后在上方展开第二层操作列表形成可展开/收起的双层工具栏cube-toolbar :actionsactions :more-actionsmoreActions clickclickHandler/cube-toolbarexport default { data() { return { money: 10, actions: [ { text: 完成订单, action: showText }, { text: 打车来接, checked: false, type: checkbox }, { text: 一口价span classorange10元/span, action: moreMoney } ], moreActions: [ { text: 操作a, action: showText }, { text: 操作b, action: showText }, { text: 操作c, icon: cubeic-right, action: showText } ] } }, methods: { showText(item) { this.$createToast({ type: correct, txt: clicked item.text, time: 1000 }).show() }, moreMoney(item) { this.money 10 item.text 一口价span classorange this.money 元/span }, clickHandler(item) { if (item.action) { thisitem.action } } } }.orange color: #fc9153注意moreActions中的操作项结构与actions完全一致同样支持text可含 HTML、action指令、icon如示例中的cubeic-right以及 checkbox 类型。Props 配置说明官方文档给出两个顶层 Props| 参数 | 说明 | 类型 | 默认值 | 示例 | | - | - | - | - | - | | actions | 定义一组操作 | Array | [] |[{ text: 完成订单 }]| | moreActions | 定义更多的一组操作 | Array | [] |[{ text: 完成订单 }]|源码 toolbar.vue 中actions类型为Array默认返回[]moreActions类型为Array且未声明默认值传undefined即表示不启用更多操作见示例页面的:more-actionsmore ? moreActions : undefined写法。actions 子配置项每个操作项支持以下字段| 参数 | 说明 | 类型 | 可选值 | 默认值 | | - | - | - | - | - | | type | 类型包括 button 和 checkbox | String | button/checkbox | button | | text | 文案支持写入 HTML | String | - | | | checked | 当为 checkbox 类型时checkbox 的初始状态 | Boolean | true/false | false |结合 Toolbar.d.ts 的类型定义完整操作项还包含action自定义指令名与icon图标类名如cubeic-right两个可选字段interface IActions { type?: button | checkbox text?: string checked?: boolean action?: string icon?: string }checked的实现细节在 toolbar-item.vue 中checkbox 类型通过v-modelaction.checked双向绑定因此你可以在click回调里读取操作项的checked字段判断勾选状态也可以外部改写该字段来控制勾选。事件说明| 事件名 | 说明 | 参数 | | - | - | - | | click | 点击某一项触发 | 该项 item 的值 | | more-click | 当有更多操作时点击更多按钮时触发 | 更多操作是否处于显示状态 |click点击基本操作项或更多面板中的操作项都会触发参数是被点击操作项对象。more-click仅当存在moreActions时点击末尾的更多按钮触发参数为true/false表示更多面板当前是展开还是收起。源码原理$cubeMore 标记与双层渲染深入 toolbar.vue 可以看到组件内部的核心逻辑computed: { basicActions() { const basicActions this.actions.slice() this.moreActions basicActions.push({ icon: cubeic-more, $cubeMore: true }) return basicActions } }, methods: { itemClick(action) { if (action.$cubeMore) { this.showMore !this.showMore this.$emit(EVENT_MORE_CLICK, this.showMore) } else { this.$emit(EVENT_CLICK, action) } } }要点解析basicActions计算属性复制actions后若存在moreActions则在其末尾追加一个内部标记对象{ icon: cubeic-more, $cubeMore: true }这就是渲染在基本操作栏右侧的更多按钮。由于$cubeMore是组件内部专用字段你的业务操作项不会误触发更多逻辑。itemClick事件分发所有操作项基本与更多共用同一个点击入口通过判断action.$cubeMore分流——更多按钮切换showMore并触发more-click其余操作触发click。模板渲染模板中moreActions对应的ul classcube-toolbar-group-more使用v-ifmoreActions挂载、v-showshowMore控制展开收起第二层面板与基本操作栏之间保留10px间距并通过cube-toolbar-down伪元素绘制了指向更多按钮的小箭头见 toolbar.vue 样式展开状态下方还会展示一个小三角视觉上明确指示面板归属。按需引入与组件注册Toolbar 与 Button、Checkbox 绑定注册src/modules/toolbar/index.js 中定义Toolbar.install function (Vue) { Vue.component(Button.name, Button) Vue.component(Checkbox.name, Checkbox) Vue.component(Toolbar.name, Toolbar) } Toolbar.Button Button Toolbar.Checkbox Checkbox即通过Vue.use(Toolbar)按需注册时会一并注册其内部依赖的cube-button与cube-checkbox避免组件内部引用未注册组件同时暴露Toolbar.Button、Toolbar.Checkbox供二次开发。仓库的构建产物见 lib/toolbar/index.js对应样式为 lib/toolbar/style.css。测试验证渲染与事件行为单元测试 test/unit/specs/toolbar.spec.js 覆盖了以下关键行为可作为你理解组件契约的权威参照基础渲染仅传actions时渲染 1 个.cube-toolbar-group每个操作项生成一个.cube-toolbar-itembutton 类型断言.cube-btn文本checkbox 类型断言.cube-checkbox-label文本。更多操作渲染传入moreActions时渲染 2 个.cube-toolbar-group第二组操作数 基本操作数 1末尾的更多按钮。事件触发点击基本操作项触发一次click且参数为该操作项对象点击末尾更多按钮触发一次more-click且参数为true展开状态。小结cube-ui Toolbar 以配置驱动的方式封装了底部操作栏actions负责一组操作button/checkbox 混排、文本支持 HTMLmoreActions自动追加更多按钮形成双层展开结构事件侧通过click回传操作项对象、more-click回传展开状态配合action指令分发模式即可快速接入业务逻辑。若需查看更多组件组合用法可参考 example/pages/toolbar.vue 与 Toolbar 中文文档。赞分享前端UI组件移动开发【免费下载链接】cube-ui:large_orange_diamond: A fantastic mobile ui lib implement by Vue项目地址https://gitcode.com/gh_mirrors/cu/cube-ui点击查看免费下载相关推荐cube-ui Toolbar 工具栏组件实战指南组合按钮与复选框实现可展开双层操作栏cube ui Toolbar 工具栏组件实战指南组合按钮与复选框实现可展开双层操作栏 导读 Toolbar工具栏是 cube ui 自 1.9.0 版前端UI组件移动开发Vuetify v-toolbar 工具栏组件完全指南属性、插槽与实战案例Vuetify v toolbar 工具栏组件完全指南属性、插槽与实战案例 v toolbar 是 Vuetify 组件库中构建任何图形用户界面都不可或缺的基前端UI组件AI Elements Toolbar 组件实战指南为 React Flow 节点打造现代风格的操作工具栏AI Elements Toolbar 组件实战指南为 React Flow 节点打造现代风格的操作工具栏 导读 本文讲解 AI Elements 组件库中的后端前端CRM人工智能AI Agent上一篇5个技巧玩转SculptGL从零开始的浏览器3D雕刻指南下一篇5分钟跑通开源告警管理平台 Keep 完整上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考