前端UI组件移动开发小程序【免费下载链接】wot-design-uni一个基于Vue3TS开发的uni-app组件库提供70高质量组件支持暗黑模式、国际化和自定义主题。项目地址https://gitcode.com/gh_mirrors/wo/wot-design-uni点击查看免费下载ActionSheet动作面板是移动端最常见的交互组件之一用于从页面底部弹出的一组操作菜单。本文将以 wot-design-uni 开源组件库中的wd-action-sheet组件为线索系统讲解其全部配置项、事件回调、数据结构和底层实现原理并结合仓库源码与测试用例帮助你掌握在不同业务场景分享菜单、操作确认、多入口面板下如何正确、高效地使用它。一、组件定位与适用场景wd-action-sheet是 wot-design-uni 提供的从底部弹出的动作菜单面板组件官方文档定义见 docs/component/action-sheet.md。它的典型使用场景包括展示一组可执行操作如编辑、删除、分享分享类面板带图标的入口矩阵如微信好友、朋友圈、QQ 好友需要标题、取消按钮与自定义内容的轻量确认面板。从源码结构看该组件内部复用了wd-popup弹层组件负责遮罩、动画、层级与安全区适配而wd-action-sheet自身专注渲染菜单选项actions与自定义面板panels两套内容体系职责清晰、便于扩展。二、基础用法v-model 控制显隐 actions 渲染选项ActionSheet 通过v-model控制显示与隐藏。选项由actions数组提供数组内每个对象的结构如下参数类型说明namestring选项名称subnamestring描述信息colorstring颜色最小可运行示例组合式 API script setupwd-toast / wd-button clickshowActions弹出菜单/wd-button wd-action-sheet v-modelshow :actionsactions closeclose selectselect /const show refboolean(false) const actions ref([ { name: 选项1 }, { name: 选项2 }, { name: 选项3, subname: 描述信息 } ]) function showActions() { show.value true } function close() { show.value false } const toast useToast() function select({ item, index }) { toast.show(当前选中项: ${item.title}, 下标: ${index}) }注意select事件的回调参数是一个解构对象其中item为当前点击的选项对象index为该选项在actions数组中的下标。这也是组件在源码中统一 emit 的数据格式详见下文事件机制。对应的完整演示代码可在仓库示例页 src/subPages/actionSheet/Index.vue 中查看该页面还展示了国际化文案$t(jiBenYongFa)等用法。三、选项状态颜色、禁用与加载actions数组中的每个选项对象除了名称外还可以通过color、disabled、loading三个键控制展示状态wd-button clickshowActions弹出菜单/wd-button wd-action-sheet v-modelshow :actionsactions closeclose /const show refboolean(false) const actions ref([ { name: 颜色, color: #0083ff }, { name: 禁用, disabled: true }, { loading: true } // 仅显示加载态不展示名称 ]) function showActions() { show.value true } function close() { show.value false }源码级行为验证查看组件实现 wd-action-sheet.vue 可以发现每个选项渲染为一个button当action.disabled为真时追加wd-action-sheet__action--disabled类当action.loading为真时追加--loading类并用wd-loading替代文字展示选项文字颜色通过内联样式color: ${action.color}直接注入在点击处理函数select(rowIndex, action)中源码首先判断props.actions[rowIndex].disabled || props.actions[rowIndex].loading为真时直接 return不触发 select 事件见 wd-action-sheet.vue。这一点同样被单元测试锁定在 tests/components/wd-action-sheet.test.ts 中禁用项点击不触发选择事件与加载项点击不触发选择事件两个用例分别断言wrapper.emitted(select)为 falsy。四、取消按钮设置cancel-text属性即可在面板底部展示取消按钮点击后触发cancel事件并关闭面板wd-action-sheet v-modelshow :actionsactions closeclose cancel-text取消 /从源码看取消按钮的点击逻辑为function handleCancel() { emit(cancel) close() }其中close()会同时emit(update:modelValue, false)与emit(close)见 wd-action-sheet.vue。测试用例 wd-action-sheet.test.ts 也验证了点击取消按钮后cancel、update:modelValue值为false、close三个事件都会按序触发。五、自定义面板单行与多行除了文字选项ActionSheet 还支持渲染带图标的面板panels适合做分享类入口矩阵。5.1 自定义单行面板panels为一维对象数组时渲染为单行面板对象结构如下参数类型说明iconUrlstring图片地址titlestring标题wd-button clickshowActions弹出菜单/wd-button wd-action-sheet v-modelshow :panelspanels closeclose selectselect /const show refboolean(false) const panels ref([ { iconUrl: //img12.360buyimg.com/imagetools/.../e47299e5945a6956.png, title: 微信好友 } ]) function showActions() { show.value true } function close() { show.value false } const toast useToast() function select({ item, index }) { toast.show(当前选中项: ${item.title}, 下标: ${index}) }5.2 多行展示当panels为二维数组时每个子数组代表一行适合多行、可横向滚动的入口矩阵wd-button clickshowActions弹出菜单/wd-button wd-action-sheet v-modelshow :panelspanels closeclose selectselect /const show refboolean(false) const panels ref([ [ { iconUrl: //img12.360buyimg.com/.../e47299e5945a6956.png, title: 微信好友 } ], [ { iconUrl: //img12.360buyimg.com/.../e47299e5945a6956.png, title: 微信好友 } ] ]) function showActions() { show.value true } function close() { show.value false } const toast useToast() function select({ item, rowIndex, colIndex }) { toast.show(当前选中项: ${item.title}, 行下标: ${rowIndex}, 列下标: ${colIndex}) }5.3 一维/二维的判断与 select 参数差异源码解读组件内部通过isPanelArray()判断 panels 是一维还是二维function isPanelArray() { return props.panels.length !isArray(props.panels[0]) }一维数组会被包装成[panels]进行渲染computedValue逻辑见 wd-action-sheet.vue点击面板时一维数组的select事件参数为{ item, index }二维数组的select事件参数为{ item, rowIndex, colIndex }见 wd-action-sheet.vue。单元测试分别用一维数组面板点击触发选择事件与二维数组面板点击触发选择事件锁定这两种数据结构与回调参数wd-action-sheet.test.ts。样式方面面板行固定高度 84px、内容横向可滚动面板项宽 88px具体样式见 index.scss。六、标题与自定义内容插槽设置title属性展示顶部标题同时组件提供默认插槽可自由定制面板内容区注意面板底部需自行预留内边距避免内容被遮挡wd-action-sheet v-modelshow title标题 closeclose view stylepadding: 15px 15px 150px 15px;内容/view /wd-action-sheet从源码看有标题时头部结构为view v-iftitle :classwd-action-sheet__header ${customHeaderClass} {{ title }} wd-icon custom-classwd-action-sheet__close nameadd clickclose / /view即标题右侧会渲染一个关闭图标复用wd-icon通过transform: rotate(-45deg)将add图标旋转为关闭 × 样式点击同样关闭面板。测试用例标题渲染与点击关闭图标关闭分别验证了头部文案与关闭行为wd-action-sheet.test.ts、wd-action-sheet.test.ts。七、Attributes完整配置项参数说明类型可选值默认值v-model设置菜单显示隐藏boolean--actions菜单选项array-[]panels自定义面板项可以为字符串数组也可以为对象数组如果为二维数组则为多行展示array-[]title标题string--cancel-text取消按钮文案string--close-on-click-action点击选项后是否关闭菜单boolean-trueclose-on-click-modal点击遮罩是否关闭boolean-trueduration动画持续时间number-200(ms)z-index菜单层级number-10lazy-render弹层内容懒渲染触发展示时才渲染内容boolean-truesafe-area-inset-bottom弹出面板是否设置底部安全距离iPhone X 类型的机型boolean-true补充源码中还提供了rootPortal属性默认false用于将弹层从页面中脱离出来解决各种 fixed 失效问题H5 使用 teleport、App 使用 renderjs、小程序使用 root-portal详见 types.ts。底层实现属性如何传递到 wd-popupwd-action-sheet的绝大多数行为属性duration、z-index、close-on-click-modal、safe-area-inset-bottom、lazy-render、root-portal都会原样透传给内部封装的wd-popup见 wd-action-sheet.vue。这意味着动画时长、遮罩点击、安全区适配等能力全部复用 popup 弹层基建action-sheet 专注处理选项渲染与选中逻辑。测试用例逐一验证了透传行为例如传递 z-index 属性到弹出层传递 duration 属性到弹出层传递 closeOnClickModal 属性到弹出层传递 safeAreaInsetBottom 属性到弹出层传递 lazyRender 属性到弹出层等wd-action-sheet.test.ts。八、Events事件回调事件名称说明参数select点击选项时触发菜单选项或自定义面板一维数组item: 选项对象, index: 选项下标自定义面板二维数组item: 选项对象, rowIndex: 选项行下标, colIndex: 选项列下标open弹出层打开时触发-opened弹出层打开动画结束时触发-close弹出层关闭时触发-closed弹出层关闭动画结束时触发-click-modal点击遮罩时触发-cancel点击取消按钮时触发-事件流转链源码追踪open/opened/closed分别由 popup 的enter、after-enter、after-leave事件转发而来见 wd-action-sheet.vueclick-modal由 popup 的click-modal转发handleClickModalselect在点击选项/面板时触发受disabled/loading拦截且受close-on-click-action控制是否随后自动关闭wd-action-sheet.vue。对应测试覆盖打开事件触发打开完成事件触发关闭完成事件触发点击遮罩事件触发等wd-action-sheet.test.ts以及点击后关闭功能 / 点击后不关闭功能wd-action-sheet.test.ts。九、数据结构定义Action菜单选项键名说明类型name选项名称stringsubname描述信息stringcolor颜色stringdisabled禁用booleanloading加载中状态booleanPanel自定义面板项键名说明类型iconUrl图片地址stringtitle标题内容string以上 TypeScript 类型声明定义在 types.ts可直接import type { Action, Panel }使用获得完善的类型提示。十、外部样式类与主题适配类名说明custom-class根节点样式custom-header-classheader 头部样式这两者在源码中分别对应customClass继承自baseProps见 common/props.ts与customHeaderClass属性types.ts。此外组件还支持customStyle内联样式注入。测试应用自定义头部类名应用自定义类名应用自定义样式验证了这三者的作用wd-action-sheet.test.ts。在主题方面index.scss 中通过include b(action-sheet)与include m(disabled)等 BEM 混入定义样式并针对.wot-theme-dark暗黑模式提供了完整的颜色变量覆盖背景、文字、禁用色、副标题、取消按钮、面板标题等说明该组件开箱即支持 wot-design-uni 的暗黑主题体系。同时选项区设置了max-height: 50vh与纵向滚动面板区横向滚动避免选项过多时超出屏幕。十一、小结与进阶提示双数据源actions负责文字菜单panels负责图标面板一维/二维数组决定单行/多行渲染并影响select回调参数结构{item, index}与{item, rowIndex, colIndex}。状态拦截disabled与loading的选项点击不会触发select可用于进行中/不可用的交互保护。关闭策略close-on-click-action、close-on-click-modal两个开关可分别控制点击选项、点击遮罩后的关闭行为默认均为true。复用弹层基建动画、层级、安全区、懒渲染等能力来自wd-popup属性透传保证了行为一致性与低维护成本。自定义能力标题 默认插槽 customClass/customHeaderClass/customStyle足以应对绝大多数定制需求暗黑模式下样式自动适配。如果需要进一步研究渲染细节、类型定义或回归测试可直接阅读仓库中的 wd-action-sheet.vue、types.ts、index.scss 与 wd-action-sheet.test.ts。赞分享前端UI组件移动开发小程序【免费下载链接】wot-design-uni一个基于Vue3TS开发的uni-app组件库提供70高质量组件支持暗黑模式、国际化和自定义主题。项目地址https://gitcode.com/gh_mirrors/wo/wot-design-uni点击查看免费下载相关推荐Vant Weapp ActionSheet 动作面板组件完全指南从基础用法到微信开放能力Vant Weapp ActionSheet 动作面板组件完全指南从基础用法到微信开放能力 底部弹起的模态面板是移动端交互中最常见的操作形式之一。Vant W前端小程序UI组件移动开发Semi Design Collapse 折叠面板组件完全指南从基础用法到源码级原理剖析Semi Design Collapse 折叠面板组件完全指南从基础用法到源码级原理剖析 本文以 Semi Designdouyinfe/semi ui前端UI组件设计系统RSUITE PanelGroup 手风琴面板组从基础用法到源码原理的完整实战指南RSUITE PanelGroup 手风琴面板组从基础用法到源码原理的完整实战指南 Panel 是 RSUITE 中用于承载内容的面板容器支持折叠、阴影、线前端UI组件上一篇fast_obj为何这款C语言OBJ解析器比同类快5-10倍核心优势深度解析下一篇wepy 中启用 async/awaitwepy/babel-plugin-import-regenerator 安装配置与源码原理详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考