ActionSheet 动作面板

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet

简单来说是从手机底部弹出的一个层, 层中放置 2 到 3 个按钮, 或一个最下方的取消按钮.

基本用法:

<van-action-sheet 
  v-model:show="show" 
  :actions="actions"
  cancel-text="取消"
  close-on-click-action
  @select="selecHandler"
  @canel="cancelHandler"
>
</van-action-sheet>

const show = ref<boolean>(false)
const actions = ref<ActionSheetAction[]>([
  { name: '选项一' },
  { name: '选项二' },
  { name: '选项三' },
])
const selectHandler = (item: ActionSheetAction) => {}
const cancelHandler = () => {}

这里 ActionSheetAction 的定义为:

export type ActionSheetAction = {
    name?: string;
    color?: string;
    subname?: string;
    loading?: boolean;
    disabled?: boolean;
    callback?: (action: ActionSheetAction) => void;
    className?: unknown;
};

说明:

• 默认不会显示取消按钮, 使用 cancel-text, 才会显示取消按钮.
• 默认不会关闭动作面板:
  • 在点击 (select) 事件中为 show 赋值为 false
  • 使用取消按钮, 在点击后关闭面板, 并触发 cancel 事件
  • 使用 close-on-click-action 属性
• 在 select 事件中, 对参数的 name 进行判断, 然后触发相应的行为.

需要注意, 函数式接口需要手动引入 css