ActionSheet 动作面板 #

ActionSheet 组件是从页面底部弹出的模态框，为用户呈现一组与当前情境相关的选项。

基础用法 #

通过v-model:show控制弹框的显示隐藏，通过items属性定义一组选项。
如果close-on-click-action属性为真，则用户点击选项后自动关闭弹框。
通过选项的icon属性可以设置选项的图标。
通过description属性可以在面板上方显示一行描述文本，通过选项的subTitle属性可以为选项设置副标题。
如果将alignment属性设置为left则文本居左对齐。
如果将show-cancel属性设置为false则可以将面板下方的取消按钮隐藏。

选项状态 #

当选项的disabled属性为真时，选项被禁用。

自定义插槽 #

通过item插槽可以自定义选项的显示效果，通过默认插槽可以自定义整个面板的显示效果。

类型 #

/** 动作面板选项 */
interface ActionSheetItem {
  /** 选项标题 */
  title?: string;

  /** 选项副标题，显示在标题下方 */
  subTitle?: string;

  /** 图标名，图标显示在标题左侧 */
  icon?: string;

  /** 自定义颜色 */
  color?: string;

  /** 是否处于禁用状态 */
  disabled?: boolean;

  /** 自定义类名 */
  className?: string;

  [key: string]: any;
}

属性 #

事件 #

插槽 #

CSS 变量 #