动作面板 ActionSheet

从底部弹出的动作菜单面板

使用

API

安装使用

import { TiActionSheet } from '@titian-design/mobile-vue'

用法示例

展示

codesanbox

copy

code

<template>
  <TiButton @click="handle(true)">展示</TiButton>
  <TiActionSheet
    title="标题"
    :visible="visible"
    :actions="actions"
    @cancel="handle(false)"
    @select="handle(false)"
    @close="handle(false)"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiActionSheet, TiButton } from 'titian-h5-vue';

const visible = ref(false);
const actions = ref([
  { name: '选项1', description: '描述1' },
  { name: '选项1', description: '描述1', icon: 'home' },
  { name: '选项1', description: '描述1', disabled: true },
]);

const handle = (v: boolean) => {
  visible.value = v;
};
</script>

TiActionSheet API

属性 Properties

名称	类型	必填	默认值	说明	备注
visible	boolean	否	-	是否显示动作面板	-
title	string	否	-	标题	-
actions	Array<Option>	是	-	菜单选项，Option类型	-
cancel-text	string	否	-	按钮	-
hover-class	string	否	'active'	指定按钮按下去的样式类	-
alias	Record<string, string>	否	-	数据项默认字段名name description icon loading disabled的别名，用于自定义数据，可替代tabKey属性	-
teleport	Element	否	document.body	DOM 挂载节点	-

Option

API 中的 actions 为一个对象数组，数组中的每一个对象有以下 key：

名称	类型	必填	默认值	说明	备注
name	string	否	-	标题	-
description	string	否	-	描述文字	-
icon	string	否	-	标题左侧图标	-
loading	string	否	-	是否为加载状态	-
disabled	boolean	否	-	是否为禁用状态	-

事件 Events

名称	参数列表	描述	备注
select	(e: CustomEvent<Option>) => void	选中选项时触发，禁用或加载状态下不会触发，Option类型	-
cancel	(e: CustomEvent) => void	取消按钮点击时触发	-
close	(e: CustomEvent) => void	点击遮罩时触发	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--action-sheet-bg-color	theme.color.gray.background.40	整体弹层，底部内容区域背景色	-
--action-sheet-line-height	theme.lineHeight.multiline.t3	菜单项文字行高	-
--action-sheet-title-color	theme.color.gray.texticon.900	标题文字颜色	-
--action-sheet-title-font-size	theme.fontSize.t7	标题文字字号	-
--action-sheet-description-color	theme.color.gray.texticon.400	描述文字颜色	-
--action-sheet-description-font-size	theme.fontSize.t4	描述文字字号	-
--action-sheet-description-line-height	theme.lineHeight.multiline.t1	描述文字行高	-
--action-sheet-description-margin-top	theme.spacing.vertical.v3	描述文字上方间距	-
--action-sheet-padding-v	theme.spacing.vertical.v9	菜单项垂直方向内边距	-
--action-sheet-padding-h	theme.spacing.horizontal.h0	菜单项水平方向内边距	-
--action-sheet-button-bg-color	theme.color.gray.background.default	菜单项背景色	-
--action-sheet-button-color	theme.color.gray.texticon.900	菜单项文字颜色	-
--action-sheet-button-font-size	theme.fontSize.t6	菜单项文字字号	-
--action-sheet-button-active-color	rgba(0,0,0,0.1)	active状态下菜单项背景色	-
--action-sheet-button-disabled-color	theme.color.gray.texticon.250	禁用状态下侧单项文字颜色	-
--action-sheet-icon-margin-right	theme.spacing.horizontal.h2	菜单项内部图标右边距	-
--action-sheet-cancel-btn-gap	theme.spacing.gap.g5	取消按钮上方间距	-
--action-sheet-title-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-title-font-weight	theme.fontWeight.semibold	-	-
--action-sheet-title-padding-v	theme.spacing.vertical.v9	-	-
--action-sheet-button-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-button-font-weight	theme.fontWeight.regular	-	-
--action-sheet-icon-font-size	theme.fontSize.t6	-	-
--action-sheet-cancel-font-size	theme.fontSize.t6	-	-
--action-sheet-cancel-line-height	theme.lineHeight.multiline.t3	-	-
--action-sheet-cancel-color	theme.color.gray.texticon.550	-	-
--action-sheet-cancel-padding-v	theme.spacing.vertical.v9	-	-