Vant ActionSheet 组件完全指南底部动作面板的配置、交互与源码解析【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantActionSheet动作面板是 Vant 中从屏幕底部弹出的模态面板用于承载与当前场景相关的多个操作选项是移动端「分享、更多操作、菜单选择」等交互的标准形态。本文以 ActionSheet 官方文档 为主体结合 组件源码、样式实现 与 单元测试 逐层拆解其用法与实现原理读完即可在真实项目中熟练配置、定制并理解其底层机制。安装与组件注册ActionSheet 与其他 Vant 组件一样既可以通过app.use全局注册也可以按需引入。全局注册的方式如下import { createApp } from vue; import { ActionSheet } from vant; const app createApp(); app.use(ActionSheet);从 入口文件 可以看到组件通过withInstall包装后导出同时导出了actionSheetProps与ActionSheetProps、ActionSheetAction、ActionSheetThemeVars等类型并声明了全局组件VanActionSheet因此在模板中可以直接使用van-action-sheet标签。除全局注册外还支持局部注册、unplugin-vue-components自动导入等方式更多注册方式可参考 组件注册。基础用法基本用法通过actions属性传入选项数组使用v-model:show控制面板的显示与隐藏监听select事件获取用户点击的选项van-cell is-link titleBasic Usage clickshow true / van-action-sheet v-model:showshow :actionsactions selectonSelect /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3 }, ]; const onSelect (item) { show.value false; showToast(item.name); }; return { show, actions, onSelect, }; }, };对应示例可参考 演示页面 中的showBasic实现。展示图标为actions中的每个选项添加icon字段即可显示图标图标名称为 Vant 内置图标库中的名称如cart-o、shop-o、star-o也支持传入图片 URLvan-cell is-link titleShow Icon clickshow true / van-action-sheet v-model:showshow :actionsactions selectonSelect /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1, icon: cart-o }, { name: Option 2, icon: shop-o }, { name: Option 3, icon: star-o }, ]; const onSelect (item) { show.value false; showToast(item.name); }; return { show, actions, onSelect, }; }, };从源码看图标由renderIcon渲染为 Icon 组件其尺寸与右侧间距通过 CSS 变量--van-action-sheet-item-icon-size与--van-action-sheet-item-icon-margin-right控制。展示取消按钮通过cancel-text设置取消按钮文案监听cancel事件处理取消逻辑。结合close-on-click-action可以让点击任意选项后自动关闭面板van-action-sheet v-model:showshow :actionsactions cancel-textCancel close-on-click-action cancelonCancel /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3 }, ]; const onCancel () showToast(cancel); return { show, actions, onCancel, }; }, };取消按钮由renderCancel渲染为原生button且在其上方会自动插入一段间距bem(gap)使取消按钮与选项区域视觉分隔见 ActionSheet.tsx。展示描述信息通过description属性在选项上方展示一段说明文字同时单个选项也支持subname副标题字段van-action-sheet v-model:showshow :actionsactions cancel-textCancel descriptionDescription close-on-click-action /import { ref } from vue; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3, subname: Description }, ]; return { show, actions, }; }, };源码中描述区由renderDescription渲染且会优先渲染description插槽ActionSheet.tsx。副标题则紧跟主标题渲染在独立的__subname容器中并通过overflow-wrap: break-word支持长文本换行index.less。选项状态每个选项可以通过color、disabled、loading三个字段分别控制文字颜色、禁用态与加载态van-action-sheet v-model:showshow :actionsactions cancel-textCancel close-on-click-action /import { ref } from vue; export default { setup() { const show ref(false); const actions [ { name: Colored Option, color: #ee0a24 }, { name: Disabled Option, disabled: true }, { name: Loading Option, loading: true }, ]; return { show, actions, }; }, };在源码的renderAction中color会以内联样式直接作用于选项按钮而disabled与loading会阻止点击事件继续执行——它们不仅不会触发callback与select事件甚至不会触发关闭逻辑ActionSheet.tsx。样式上两种状态都使用禁用色--van-action-sheet-item-disabled-text-color且点击时不产生按压反馈其中禁用态光标为not-allowedindex.less。自定义面板当默认的选项列表无法满足需求时可以直接在默认插槽中放置任意自定义内容并配合title显示标题van-action-sheet v-model:showshow titleTitle div classcontentContent/div /van-action-sheet style .content { padding: 16px 16px 160px; } /style自定义内容会渲染在actions列表之后的内容区bem(content)该区域本身是flex: 1 auto且支持纵向滚动overflow-y: auto的容器因此即使选项很多也不会撑破面板高度index.less。API 详解Props属性说明类型默认值v-model:show是否显示 ActionSheetbooleanfalseactions选项列表ActionSheetAction[][]title顶部标题string-cancel-text取消按钮文字string-description选项上方的描述文字string-closeable是否显示关闭图标booleantrueclose-icon关闭图标名称stringcrossduration过渡动画时长单位秒number | string0.3z-index指定 z-index 为固定值number | string2000round是否显示圆角booleantrueoverlay是否显示遮罩层booleantrueoverlay-class自定义遮罩层类名string | Array | object-overlay-style自定义遮罩层样式object-lock-scroll是否锁定背景滚动booleantruelazy-render是否在首次出现时才渲染内容booleantrueclose-on-popstate是否在页面返回时关闭booleantrueclose-on-click-action点击选项后是否关闭booleanfalseclose-on-click-overlay点击遮罩层后是否关闭booleantruesafe-area-inset-bottom是否开启底部安全区适配booleantrueteleport指定挂载节点string | Element-before-close关闭前的回调函数(action: string) boolean | Promiseboolean-以上表格与文档一致。需要补充的是几个关键属性的默认值来源round、closeable、closeOnPopstate、safeAreaInsetBottom均使用了工具函数truthProp即默认true的布尔属性closeIcon默认crossactions使用makeArrayProp保证即使未传值也得到空数组ActionSheet.tsx。其中大部分属性并非 ActionSheet 自行实现而是从 Popup 共享属性 继承而来zIndex、overlay、duration、teleport、lockScroll、lazyRender、beforeClose、overlayClass、overlayStyle、closeOnClickOverlay等。组件在渲染时通过popupInheritKeys将继承属性透传给底层的 Popup 组件这解释了为什么 ActionSheet 天然拥有遮罩、锁滚动、懒渲染、Teleport 挂载与关闭拦截等一整套弹层能力。几个值得注意的行为细节z-index默认值为文档标注的2000实际由useGlobalZIndex在每次打开时动态递增避免多个弹层互相覆盖仅当显式传入z-index时才使用固定值Popup.tsx。duration作用于底层 Popup 的transitionDuration传入的值以秒为单位拼接s后缀Popup.tsx。lazy-render默认true即面板首次打开前不会渲染 DOM。测试用例验证了关闭lazyRender后内容区会立即出现在 DOM 中index.spec.ts。before-close通过callInterceptor拦截关闭流程支持返回boolean或Promiseboolean常用于「二次确认」等场景。ActionSheetAction 数据结构字段说明类型name选项标题stringsubname选项副标题stringcolor选项文字颜色stringiconv4.8.6图标名称或图片 URLstringclassName选项额外类名string | Array | objectloading是否处于加载状态booleandisabled是否禁用booleancallback点击后的回调函数action: ActionSheetActionActionSheetAction类型在源码中定义于 ActionSheet.tsx其中className直接透传给选项按钮的 class 数组ActionSheet.tsx可用于精细化的样式覆盖。Events事件说明回调参数select点击选项时触发action: ActionSheetAction, index: numbercancel点击取消按钮时触发-open打开面板时触发-close关闭面板时触发-opened面板完全打开时触发-closed面板完全关闭时触发-click-overlay点击遮罩层时触发event: MouseEventselect、cancel、update:show由 ActionSheet 自身声明ActionSheet.tsx其中select事件在nextTick中触发ActionSheet.tsx确保选项的关闭状态先更新而open、close、opened、closed、click-overlay由底层 Popup 抛出后透传Popup.tsx。点击选项时的事件顺序为执行callback→ 若close-on-click-action为真则关闭面板 →nextTick后触发selectActionSheet.tsx。测试用例证实了 loading/disabled 选项不会触发select事件index.spec.ts。Slots名称说明SlotPropsdefault自定义面板内容-description自定义选项上方的描述区-cancel自定义取消按钮内容-action自定义选项内容{ action: ActionSheetAction, index: number }Types组件对外导出如下类型定义便于在 TypeScript 项目中获得完整的类型提示import type { ActionSheetProps, ActionSheetAction } from vant;此外还可从 types.ts 获得ActionSheetThemeVars主题变量类型。主题定制ActionSheet 的所有可定制样式均以 CSS 变量形式暴露可通过 ConfigProvider 组件 全局配置或直接在作用域样式中覆盖变量名默认值说明--van-action-sheet-max-height80%面板最大高度--van-action-sheet-header-height48px标题高度--van-action-sheet-header-font-sizevar(--van-font-size-lg)标题字号--van-action-sheet-description-colorvar(--van-text-color-2)描述文字颜色--van-action-sheet-description-font-sizevar(--van-font-size-md)描述字号--van-action-sheet-description-line-heightvar(--van-line-height-md)描述行高--van-action-sheet-item-backgroundvar(--van-background-2)选项背景色--van-action-sheet-item-font-sizevar(--van-font-size-lg)选项字号--van-action-sheet-item-line-heightvar(--van-line-height-lg)选项行高--van-action-sheet-item-text-colorvar(--van-text-color)选项文字颜色--van-action-sheet-item-disabled-text-colorvar(--van-text-color-3)禁用/加载选项文字颜色--van-action-sheet-item-icon-size18px选项图标尺寸--van-action-sheet-item-icon-margin-rightvar(--van-padding-xs)选项图标右间距--van-action-sheet-subname-colorvar(--van-text-color-2)副标题颜色--van-action-sheet-subname-font-sizevar(--van-font-size-sm)副标题字号--van-action-sheet-subname-line-heightvar(--van-line-height-sm)副标题行高--van-action-sheet-close-icon-size22px关闭图标尺寸--van-action-sheet-close-icon-colorvar(--van-gray-5)关闭图标颜色--van-action-sheet-close-icon-padding0 var(--van-padding-md)关闭图标内边距--van-action-sheet-cancel-text-colorvar(--van-gray-7)取消按钮文字颜色--van-action-sheet-cancel-padding-topvar(--van-padding-xs)取消按钮上方间距--van-action-sheet-cancel-padding-colorvar(--van-background)取消按钮上方间距背景色--van-action-sheet-loading-icon-size22px加载图标尺寸这些变量均声明于 index.less 的:root, :host选择器下其中大量变量引用了 Vant 全局设计令牌如--van-font-size-lg、--van-text-color-2、--van-background-2意味着只需调整主题令牌即可让 ActionSheet 跟随整体设计体系变化。源码架构与交互原理基于 Popup 的组合式实现从实现上看ActionSheet 并非从零实现一个弹层而是对 Popup 组件 的组合封装组件根节点渲染Popup positionbottom将继承的共享 props 透传并依次渲染标题区、描述区、选项列表含默认插槽内容与取消按钮ActionSheet.tsx。因此 Popup 的van-popup--round圆角类、遮罩、锁滚动等能力全部被复用。选项点击的完整链路选项点击的完整链路为renderAction绑定onClick→ 判断disabled/loading拦截 → 执行选项callback→ 按closeOnClickAction关闭 →nextTick后触发select事件。测试用例对这条链路做了逐项验证包括 select 事件参数选项对象与 index、callback 调用、loading/disabled 拦截、close-on-click-action关闭行为等index.spec.ts。测试覆盖的行为保证单元测试还覆盖了其余关键行为可作为使用时的行为契约参考取消按钮触发cancel事件index.spec.tsround属性控制van-popup--round类的有无index.spec.tscolor以内联样式改变选项文字颜色index.spec.tscloseable控制关闭图标显示、closeIcon自定义图标index.spec.ts点击遮罩层触发update:show与click-overlayindex.spec.tssafe-area-inset-bottom控制van-safe-area-bottom类index.spec.tsteleport可将面板挂载到指定 DOM 节点index.spec.ts。总结ActionSheet 是 Vant 中面向「底部多选项操作」场景的高频组件。使用层面掌握actions数据驱动的选项渲染、select/cancel事件、以及color/disabled/loading/subname/icon等选项字段即可覆盖绝大多数业务需求进阶层面通过继承自 Popup 的遮罩、锁滚动、懒渲染、Teleport、before-close拦截等能力与完整的 CSS 变量体系可以将其无缝融入任意复杂页面与设计体系。若需在实际项目中查看完整可运行的示例可直接阅读 演示页面 的完整实现。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Vant ActionSheet 组件完全指南：底部动作面板的配置、交互与源码解析
Vant ActionSheet 组件完全指南底部动作面板的配置、交互与源码解析【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vantActionSheet动作面板是 Vant 中从屏幕底部弹出的模态面板用于承载与当前场景相关的多个操作选项是移动端「分享、更多操作、菜单选择」等交互的标准形态。本文以 ActionSheet 官方文档 为主体结合 组件源码、样式实现 与 单元测试 逐层拆解其用法与实现原理读完即可在真实项目中熟练配置、定制并理解其底层机制。安装与组件注册ActionSheet 与其他 Vant 组件一样既可以通过app.use全局注册也可以按需引入。全局注册的方式如下import { createApp } from vue; import { ActionSheet } from vant; const app createApp(); app.use(ActionSheet);从 入口文件 可以看到组件通过withInstall包装后导出同时导出了actionSheetProps与ActionSheetProps、ActionSheetAction、ActionSheetThemeVars等类型并声明了全局组件VanActionSheet因此在模板中可以直接使用van-action-sheet标签。除全局注册外还支持局部注册、unplugin-vue-components自动导入等方式更多注册方式可参考 组件注册。基础用法基本用法通过actions属性传入选项数组使用v-model:show控制面板的显示与隐藏监听select事件获取用户点击的选项van-cell is-link titleBasic Usage clickshow true / van-action-sheet v-model:showshow :actionsactions selectonSelect /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3 }, ]; const onSelect (item) { show.value false; showToast(item.name); }; return { show, actions, onSelect, }; }, };对应示例可参考 演示页面 中的showBasic实现。展示图标为actions中的每个选项添加icon字段即可显示图标图标名称为 Vant 内置图标库中的名称如cart-o、shop-o、star-o也支持传入图片 URLvan-cell is-link titleShow Icon clickshow true / van-action-sheet v-model:showshow :actionsactions selectonSelect /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1, icon: cart-o }, { name: Option 2, icon: shop-o }, { name: Option 3, icon: star-o }, ]; const onSelect (item) { show.value false; showToast(item.name); }; return { show, actions, onSelect, }; }, };从源码看图标由renderIcon渲染为 Icon 组件其尺寸与右侧间距通过 CSS 变量--van-action-sheet-item-icon-size与--van-action-sheet-item-icon-margin-right控制。展示取消按钮通过cancel-text设置取消按钮文案监听cancel事件处理取消逻辑。结合close-on-click-action可以让点击任意选项后自动关闭面板van-action-sheet v-model:showshow :actionsactions cancel-textCancel close-on-click-action cancelonCancel /import { ref } from vue; import { showToast } from vant; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3 }, ]; const onCancel () showToast(cancel); return { show, actions, onCancel, }; }, };取消按钮由renderCancel渲染为原生button且在其上方会自动插入一段间距bem(gap)使取消按钮与选项区域视觉分隔见 ActionSheet.tsx。展示描述信息通过description属性在选项上方展示一段说明文字同时单个选项也支持subname副标题字段van-action-sheet v-model:showshow :actionsactions cancel-textCancel descriptionDescription close-on-click-action /import { ref } from vue; export default { setup() { const show ref(false); const actions [ { name: Option 1 }, { name: Option 2 }, { name: Option 3, subname: Description }, ]; return { show, actions, }; }, };源码中描述区由renderDescription渲染且会优先渲染description插槽ActionSheet.tsx。副标题则紧跟主标题渲染在独立的__subname容器中并通过overflow-wrap: break-word支持长文本换行index.less。选项状态每个选项可以通过color、disabled、loading三个字段分别控制文字颜色、禁用态与加载态van-action-sheet v-model:showshow :actionsactions cancel-textCancel close-on-click-action /import { ref } from vue; export default { setup() { const show ref(false); const actions [ { name: Colored Option, color: #ee0a24 }, { name: Disabled Option, disabled: true }, { name: Loading Option, loading: true }, ]; return { show, actions, }; }, };在源码的renderAction中color会以内联样式直接作用于选项按钮而disabled与loading会阻止点击事件继续执行——它们不仅不会触发callback与select事件甚至不会触发关闭逻辑ActionSheet.tsx。样式上两种状态都使用禁用色--van-action-sheet-item-disabled-text-color且点击时不产生按压反馈其中禁用态光标为not-allowedindex.less。自定义面板当默认的选项列表无法满足需求时可以直接在默认插槽中放置任意自定义内容并配合title显示标题van-action-sheet v-model:showshow titleTitle div classcontentContent/div /van-action-sheet style .content { padding: 16px 16px 160px; } /style自定义内容会渲染在actions列表之后的内容区bem(content)该区域本身是flex: 1 auto且支持纵向滚动overflow-y: auto的容器因此即使选项很多也不会撑破面板高度index.less。API 详解Props属性说明类型默认值v-model:show是否显示 ActionSheetbooleanfalseactions选项列表ActionSheetAction[][]title顶部标题string-cancel-text取消按钮文字string-description选项上方的描述文字string-closeable是否显示关闭图标booleantrueclose-icon关闭图标名称stringcrossduration过渡动画时长单位秒number | string0.3z-index指定 z-index 为固定值number | string2000round是否显示圆角booleantrueoverlay是否显示遮罩层booleantrueoverlay-class自定义遮罩层类名string | Array | object-overlay-style自定义遮罩层样式object-lock-scroll是否锁定背景滚动booleantruelazy-render是否在首次出现时才渲染内容booleantrueclose-on-popstate是否在页面返回时关闭booleantrueclose-on-click-action点击选项后是否关闭booleanfalseclose-on-click-overlay点击遮罩层后是否关闭booleantruesafe-area-inset-bottom是否开启底部安全区适配booleantrueteleport指定挂载节点string | Element-before-close关闭前的回调函数(action: string) boolean | Promiseboolean-以上表格与文档一致。需要补充的是几个关键属性的默认值来源round、closeable、closeOnPopstate、safeAreaInsetBottom均使用了工具函数truthProp即默认true的布尔属性closeIcon默认crossactions使用makeArrayProp保证即使未传值也得到空数组ActionSheet.tsx。其中大部分属性并非 ActionSheet 自行实现而是从 Popup 共享属性 继承而来zIndex、overlay、duration、teleport、lockScroll、lazyRender、beforeClose、overlayClass、overlayStyle、closeOnClickOverlay等。组件在渲染时通过popupInheritKeys将继承属性透传给底层的 Popup 组件这解释了为什么 ActionSheet 天然拥有遮罩、锁滚动、懒渲染、Teleport 挂载与关闭拦截等一整套弹层能力。几个值得注意的行为细节z-index默认值为文档标注的2000实际由useGlobalZIndex在每次打开时动态递增避免多个弹层互相覆盖仅当显式传入z-index时才使用固定值Popup.tsx。duration作用于底层 Popup 的transitionDuration传入的值以秒为单位拼接s后缀Popup.tsx。lazy-render默认true即面板首次打开前不会渲染 DOM。测试用例验证了关闭lazyRender后内容区会立即出现在 DOM 中index.spec.ts。before-close通过callInterceptor拦截关闭流程支持返回boolean或Promiseboolean常用于「二次确认」等场景。ActionSheetAction 数据结构字段说明类型name选项标题stringsubname选项副标题stringcolor选项文字颜色stringiconv4.8.6图标名称或图片 URLstringclassName选项额外类名string | Array | objectloading是否处于加载状态booleandisabled是否禁用booleancallback点击后的回调函数action: ActionSheetActionActionSheetAction类型在源码中定义于 ActionSheet.tsx其中className直接透传给选项按钮的 class 数组ActionSheet.tsx可用于精细化的样式覆盖。Events事件说明回调参数select点击选项时触发action: ActionSheetAction, index: numbercancel点击取消按钮时触发-open打开面板时触发-close关闭面板时触发-opened面板完全打开时触发-closed面板完全关闭时触发-click-overlay点击遮罩层时触发event: MouseEventselect、cancel、update:show由 ActionSheet 自身声明ActionSheet.tsx其中select事件在nextTick中触发ActionSheet.tsx确保选项的关闭状态先更新而open、close、opened、closed、click-overlay由底层 Popup 抛出后透传Popup.tsx。点击选项时的事件顺序为执行callback→ 若close-on-click-action为真则关闭面板 →nextTick后触发selectActionSheet.tsx。测试用例证实了 loading/disabled 选项不会触发select事件index.spec.ts。Slots名称说明SlotPropsdefault自定义面板内容-description自定义选项上方的描述区-cancel自定义取消按钮内容-action自定义选项内容{ action: ActionSheetAction, index: number }Types组件对外导出如下类型定义便于在 TypeScript 项目中获得完整的类型提示import type { ActionSheetProps, ActionSheetAction } from vant;此外还可从 types.ts 获得ActionSheetThemeVars主题变量类型。主题定制ActionSheet 的所有可定制样式均以 CSS 变量形式暴露可通过 ConfigProvider 组件 全局配置或直接在作用域样式中覆盖变量名默认值说明--van-action-sheet-max-height80%面板最大高度--van-action-sheet-header-height48px标题高度--van-action-sheet-header-font-sizevar(--van-font-size-lg)标题字号--van-action-sheet-description-colorvar(--van-text-color-2)描述文字颜色--van-action-sheet-description-font-sizevar(--van-font-size-md)描述字号--van-action-sheet-description-line-heightvar(--van-line-height-md)描述行高--van-action-sheet-item-backgroundvar(--van-background-2)选项背景色--van-action-sheet-item-font-sizevar(--van-font-size-lg)选项字号--van-action-sheet-item-line-heightvar(--van-line-height-lg)选项行高--van-action-sheet-item-text-colorvar(--van-text-color)选项文字颜色--van-action-sheet-item-disabled-text-colorvar(--van-text-color-3)禁用/加载选项文字颜色--van-action-sheet-item-icon-size18px选项图标尺寸--van-action-sheet-item-icon-margin-rightvar(--van-padding-xs)选项图标右间距--van-action-sheet-subname-colorvar(--van-text-color-2)副标题颜色--van-action-sheet-subname-font-sizevar(--van-font-size-sm)副标题字号--van-action-sheet-subname-line-heightvar(--van-line-height-sm)副标题行高--van-action-sheet-close-icon-size22px关闭图标尺寸--van-action-sheet-close-icon-colorvar(--van-gray-5)关闭图标颜色--van-action-sheet-close-icon-padding0 var(--van-padding-md)关闭图标内边距--van-action-sheet-cancel-text-colorvar(--van-gray-7)取消按钮文字颜色--van-action-sheet-cancel-padding-topvar(--van-padding-xs)取消按钮上方间距--van-action-sheet-cancel-padding-colorvar(--van-background)取消按钮上方间距背景色--van-action-sheet-loading-icon-size22px加载图标尺寸这些变量均声明于 index.less 的:root, :host选择器下其中大量变量引用了 Vant 全局设计令牌如--van-font-size-lg、--van-text-color-2、--van-background-2意味着只需调整主题令牌即可让 ActionSheet 跟随整体设计体系变化。源码架构与交互原理基于 Popup 的组合式实现从实现上看ActionSheet 并非从零实现一个弹层而是对 Popup 组件 的组合封装组件根节点渲染Popup positionbottom将继承的共享 props 透传并依次渲染标题区、描述区、选项列表含默认插槽内容与取消按钮ActionSheet.tsx。因此 Popup 的van-popup--round圆角类、遮罩、锁滚动等能力全部被复用。选项点击的完整链路选项点击的完整链路为renderAction绑定onClick→ 判断disabled/loading拦截 → 执行选项callback→ 按closeOnClickAction关闭 →nextTick后触发select事件。测试用例对这条链路做了逐项验证包括 select 事件参数选项对象与 index、callback 调用、loading/disabled 拦截、close-on-click-action关闭行为等index.spec.ts。测试覆盖的行为保证单元测试还覆盖了其余关键行为可作为使用时的行为契约参考取消按钮触发cancel事件index.spec.tsround属性控制van-popup--round类的有无index.spec.tscolor以内联样式改变选项文字颜色index.spec.tscloseable控制关闭图标显示、closeIcon自定义图标index.spec.ts点击遮罩层触发update:show与click-overlayindex.spec.tssafe-area-inset-bottom控制van-safe-area-bottom类index.spec.tsteleport可将面板挂载到指定 DOM 节点index.spec.ts。总结ActionSheet 是 Vant 中面向「底部多选项操作」场景的高频组件。使用层面掌握actions数据驱动的选项渲染、select/cancel事件、以及color/disabled/loading/subname/icon等选项字段即可覆盖绝大多数业务需求进阶层面通过继承自 Popup 的遮罩、锁滚动、懒渲染、Teleport、before-close拦截等能力与完整的 CSS 变量体系可以将其无缝融入任意复杂页面与设计体系。若需在实际项目中查看完整可运行的示例可直接阅读 演示页面 的完整实现。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考