Skip to content

底部弹窗切换器

@astryxdesign/core v0.7.1 · BottomSheetSwitcher

属性 ​

属性类型默认值说明
activeSheetstring | nullnull用 v-model:active-sheet 绑定。值是当前要显示那一步的 sheet-id;绑成 null 就整段关掉。
labelstring—整段流程的读屏名称。不传就用当前那张面板自己的 label,都没有时用 Bottom sheet。
purpose'info' | 'form' | 'required'跟当前面板的 purpose整段流程怎么被关掉。info 允许 Escape、点遮罩和下滑;form 只允许 Escape;required 堵住所有隐式关闭。
hasScrimbooleantrue整段流程共用一层遮罩。换页时它一直留着,只有整段关掉才消失。关掉它,背后页面仍然可以滚动和点击。

事件 ​

  • update:activeSheet(value: string | null):切换器想切到哪一步就发哪个 sheet-id,想关掉时发 null。这就是 v-model:active-sheet 的绑定。
  • cancel(event: Event):对话框收到原生 cancel 请求时先发这个事件。在事件上调用 event.preventDefault() 可以留住这段流程,不让它关掉。

插槽 ​

  • default:放各个 BottomSheet 步骤。每一张都要有自己不重复的 sheet-id 和自己的 label。