NaEasy UI

Appearance

ActionSheet 动作面板 ​

介绍 ​

底部弹起的模态面板，包含与当前情境相关的多个选项。

导入 ​

js
import ActionSheet from '@/components/dialog/ActionSheet.vue'

用法 ​

基础用法 ​

最简单的ActionSheet用法，展示几个选项。

vue
<template>
  <ActionSheet
    :show="show1"
    :actions="[
      { name: '选项1' },
      { name: '选项2' },
      { name: '选项3' },
    ]"
    @close="() => show1 = false"
    @select="(i, name) => {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 autoClose 属性开启自动收起
      show1 = false;
      toast?.info(`选中了 ${name}`);
    }"
  />
</template>

展示取消按钮和描述 ​

通过showCancel属性显示取消按钮，通过description属性添加描述文字。

vue
<template>
  <ActionSheet
    :show="show2"
    showCancel
    description="说明文字"
    :actions="[
      { name: '选项1' },
      { name: '选项2' },
      { name: '选项3' },
    ]"
    @close="() => show2 = false"
    @select="(i, name) => {
      show2 = false;
      toast?.info(`选中了 ${name}`);
    }"
  />
</template>

按钮颜色和描述 ​

可以自定义每个条目的文字颜色、子标题、是否加粗和是否禁用。

vue
<template>
  <ActionSheet
    :show="show3"
    showCancel
    description="可自定义每个条目文字颜色"
    :actions="[
      { name: '正常选项' },
      { name: '危险选项', color: 'danger', subname: '删除后无法恢复', bold: true },
      { name: '禁用选项1', disabled: true  },
      { name: '禁用选项2', disabled: true, subname: '这个选项不可点击'  },
    ]"
    @close="() => show3 = false"
    @select="(i, name) => {
      show3 = false;
      toast?.info(`选中了 ${name}`);
    }"
  />
</template>

超长自动滚动 ​

当选项数量过多时，ActionSheet会自动支持滚动。

vue
<template>
  <ActionSheet
    :show="show4"
    showCancel
    description="说明文字"
    :actions="[
      { name: '选项1' },
      { name: '选项2' },
      { name: '选项3' },
      { name: '选项4' },
      { name: '选项5' },
      { name: '选项6' },
      { name: '选项7' },
      { name: '选项8' },
      { name: '选项9' },
      { name: '选项10' },
      { name: '选项11' },
      { name: '选项12' },
      { name: '选项13' },
    ]"
    @close="() => show4 = false"
    @select="(i, name) => {
      show4 = false;
      toast?.info(`选中了 ${name}`);
    }"
  />
</template>

居中 ActionSheet ​

通过center属性可以让ActionSheet在屏幕居中显示。

vue
<template>
  <ActionSheet
    :show="show5"
    showCancel
    center
    description="说明文字"
    :actions="[
      { name: '选项1' },
      { name: '选项2' },
      { name: '选项3' },
      { name: '选项4' },
      { name: '选项5' },
      { name: '选项6' },
    ]"
    @close="() => show5 = false"
    @select="(i, name) => {
      show5 = false;
      toast?.info(`选中了 ${name}`);
    }"
  />
</template>

自定义面板 ​

通过插槽可以完全自定义ActionSheet的内容。

vue
<template>
  <ActionSheet
    :show="show6"
    closeable
    :closeIcon="false"
    @close="() => show6 = false"
  >
    <template #content="{ close }">
      <FlexCol>
        <ActionSheetTitle
          title="请选择选项"
          cancelText="取消"
          confirmText="确定"
          :border="false"
          @cancel="close"
          @confirm="() => {
            toast?.info('你选择了:' + JSON.stringify(choosedItem));
            close();
          }"
        />
        <SimpleList
          mode="mulit-check"
          @selectedItemChanged="(v) => { choosedItem = v; }"
          :data="[ '选项1', '选项2', '选项3', '选项4' ]"
        />
      </FlexCol>
    </template>
  </ActionSheet>
</template>

API 参考 ​

ActionSheet ​

动作面板组件。

Props ​

名称说明类型必填默认值
show是否显示动作面板boolean是false
showCancel是否显示取消按扭boolean-false
cancelText取消条目的文字string--
title顶部标题string--
description选项上方的描述信息string--
actions面板选项列表ActionSheetItem[]--
autoClose是否在点击条目后自动关闭boolean-false
center是否在屏幕居中显示boolean-false
centerWidth居中显示时的宽度string | number-'600rpx'
textColor条目文字颜色string--
mask是否显示遮罩层boolean-true
maskClosable点击遮罩层是否可以关闭boolean-true
zIndex层级number--
animation是否开启动画boolean-true
duration动画时长number-300

ActionSheetItem ​

名称说明类型必填默认值
name标题string是-
subname二级标题string--
color选项文字颜色string--
bold是否加粗当前选项boolean-false
disabled是否禁用当前选项boolean-false

Slots ​

名称说明
content自定义面板内容，提供close方法用于关闭面板

Events ​

名称说明参数
close关闭事件$event
select选择事件index: number, name: string

主题变量 ​

名称类型默认值说明
ActionSheetItemBoldbooleanfalse选项文字是否加粗
ActionSheetItemColorstringtext.content选项文字颜色
ActionSheetCancelBoldbooleanfalse取消按钮文字是否加粗
ActionSheetCancelColorstringtext.content取消按钮文字颜色
ActionSheetCenterWidthstring'600rpx'居中显示时的宽度
ActionSheetCancelBackgroundColorstringlight取消按钮背景颜色
ActionSheetCancelPaddingTopnumber20取消按钮上边距
ActionSheetMaxScrollHeightstring(screenHeight - 200) + 'px'滚动区域最大高度