ActionSheet 动作面板

介绍

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

引入

  1. import Vue from 'vue';
  2. import { ActionSheet } from 'vant';
  3. Vue.use(ActionSheet);

代码演示

基础用法

动作面板通过 actions 属性来定义选项,actions 属性是一个由对象构成的数组,数组中的每个对象配置一列,对象格式见文档下方表格。

  1. <van-cell is-link title="基础用法" @click="show = true" />
  2. <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  1. import { Toast } from 'vant';
  2. export default {
  3. data() {
  4. return {
  5. show: false,
  6. actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
  7. };
  8. },
  9. methods: {
  10. onSelect(item) {
  11. // 默认情况下点击选项时不会自动收起
  12. // 可以通过 close-on-click-action 属性开启自动收起
  13. this.show = false;
  14. Toast(item.name);
  15. },
  16. },
  17. };

展示取消按钮

设置 cancel-text 属性后,会在底部展示取消按钮,点击后关闭当前面板并触发 cancel 事件。

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. cancel-text="取消"
  5. close-on-click-action
  6. @cancel="onCancel"
  7. />
  1. import { Toast } from 'vant';
  2. export default {
  3. data() {
  4. return {
  5. show: false,
  6. actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
  7. };
  8. },
  9. methods: {
  10. onCancel() {
  11. Toast('取消');
  12. },
  13. },
  14. };

展示描述信息

通过 description 可以在菜单顶部显示描述信息,通过选项的 subname 属性可以在选项文字的右侧展示描述信息。

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. cancel-text="取消"
  5. description="这是一段描述信息"
  6. close-on-click-action
  7. />
  1. export default {
  2. data() {
  3. return {
  4. show: false,
  5. actions: [
  6. { name: '选项一' },
  7. { name: '选项二' },
  8. { name: '选项三', subname: '描述信息' },
  9. ],
  10. };
  11. },
  12. };

选项状态

可以通过 loadingdisabled 将选项设置为加载状态或禁用状态,或者通过color设置选项的颜色

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. cancel-text="取消"
  5. close-on-click-action
  6. />
  1. export default {
  2. data() {
  3. return {
  4. show: false,
  5. actions: [
  6. { name: '着色选项', color: '#ee0a24' },
  7. { name: '禁用选项', disabled: true },
  8. { name: '加载选项', loading: true },
  9. ],
  10. };
  11. },
  12. };

自定义面板

通过插槽可以自定义面板的展示内容,同时可以使用title属性展示标题栏

  1. <van-action-sheet v-model="show" title="标题">
  2. <div class="content">内容</div>
  3. </van-action-sheet>
  4. <style>
  5. .content {
  6. padding: 16px 16px 160px;
  7. }
  8. </style>

API

Props

参数说明类型默认值
v-model (value)是否显示动作面板booleanfalse
actions面板选项列表Action[][]
title顶部标题string-
cancel-text取消按钮文字string-
description选项上方的描述信息string-
closeable v2.10.5是否显示关闭图标booleantrue
close-icon关闭图标名称或图片链接stringcross
duration动画时长,单位秒number | string0.3
round是否显示圆角booleantrue
overlay是否显示遮罩层booleantrue
lock-scroll是否锁定背景滚动booleantrue
lazy-render是否在显示弹层时才渲染节点booleantrue
close-on-popstate v2.5.3是否在页面回退时自动关闭booleanfalse
close-on-click-action是否在点击选项后关闭booleanfalse
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue
get-container指定挂载的节点,用法示例string | () => Element-

Action 数据结构

actions 属性是一个由对象构成的数组,数组中的每个对象配置一列,对象可以包含以下值:

键名说明类型
name标题string
subname二级标题string
color选项文字颜色string
className为对应列添加额外的 classany
loading是否为加载状态boolean
disabled是否为禁用状态boolean

Events

事件名说明回调参数
select点击选项时触发,禁用或加载状态下不会触发action: Action, index: number
cancel点击取消按钮时触发-
open打开面板时触发-
close关闭面板时触发-
opened打开面板且动画结束后触发-
closed关闭面板且动画结束后触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
default自定义面板的展示内容
description v2.10.4自定义描述文案

常见问题

引入时提示 dependencies not found?

在 1.x 版本中,动作面板的组件名为Actionsheet,从 2.0 版本开始更名为ActionSheet,请注意区分。

ActionSheet 动作面板 - 图1