vant/src/action-sheet

ActionSheet

Install

import { createApp } from 'vue';
import { ActionSheet } from 'vant';

const app = createApp();
app.use(ActionSheet);

Usage

Basic Usage

Use actions prop to set options of action-sheet.

<van-cell is-link title="Basic Usage" @click="show = true" />
<van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onSelect = (item) => {
      show.value = false;
      Toast(item.name);
    };

    return {
      show,
      actions,
      onSelect,
    };
  },
};

Show Cancel Button

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
  @cancel="onCancel"
/>

import { ref } from 'vue';
import { Toast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3' },
    ];
    const onCancel = () => Toast('cancel');

    return {
      show,
      actions,
      onCancel,
    };
  },
};

Show Description

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  description="Description"
  close-on-click-action
/>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Option 1' },
      { name: 'Option 2' },
      { name: 'Option 3', subname: 'Description' },
    ];

    return {
      show,
      actions,
    };
  },
};

Option Status

<van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="Cancel"
  close-on-click-action
/>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const actions = [
      { name: 'Colored Option', color: '#ee0a24' },
      { name: 'Disabled Option', disabled: true },
      { name: 'Loading Option', loading: true },
    ];

    return {
      show,
      actions,
    };
  },
};

Custom Panel

<van-action-sheet v-model:show="show" title="Title">
  <div class="content">Content</div>
</van-action-sheet>

<style>
  .content {
    padding: 16px 16px 160px;
  }
</style>

API

Props

Attribute	Description	Type	Default
v-model:show	Whether to show ActionSheet	boolean	false
actions	Options	Action[]	[]
title	Title	string	-
cancel-text	Text of cancel button	string	-
description	Description above the options	string	-
closeable	Whether to show close icon	boolean	true
close-icon	Close icon name	string	cross
duration	Transition duration, unit second	number | string	0.3
round	Whether to show round corner	boolean	true
overlay	Whether to show overlay	boolean	true
lock-scroll	Whether to lock background scroll	boolean	true
lazy-render	Whether to lazy render util appeared	boolean	true
close-on-popstate	Whether to close when popstate	boolean	false
close-on-click-action	Whether to close when an action is clicked	boolean	false
close-on-click-overlay	Whether to close when overlay is clicked	boolean	true
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
teleport	Return the mount node for ActionSheet	string | Element	-

Data Structure of Action

Key	Description	Type
name	Title	string
subname	Subtitle	string
color	Text color	string
className	className for the option	string | Array | object
loading	Whether to be loading status	boolean
disabled	Whether to be disabled	boolean
callback	Callback function after clicked	action: Action

Events

Event	Description	Arguments
select	Emitted when an option is clicked	action: Action, index: number
cancel	Emitted when the cancel button is clicked	-
open	Emitted when opening ActionSheet	-
close	Emitted when closing ActionSheet	-
opened	Emitted when ActionSheet is opened	-
closed	Emitted when ActionSheet is closed	-
click-overlay	Emitted when overlay is clicked	event: MouseEvent

Slots

Name	Description
default	Custom content
description	Custom description

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@action-sheet-max-height	80%	-
@action-sheet-header-height	48px	-
@action-sheet-header-font-size	@font-size-lg	-
@action-sheet-description-color	@gray-6	-
@action-sheet-description-font-size	@font-size-md	-
@action-sheet-description-line-height	@line-height-md	-
@action-sheet-item-background	@white	-
@action-sheet-item-font-size	@font-size-lg	-
@action-sheet-item-line-height	@line-height-lg	-
@action-sheet-item-text-color	@text-color	-
@action-sheet-item-disabled-text-color	@gray-5	-
@action-sheet-subname-color	@gray-6	-
@action-sheet-subname-font-size	@font-size-sm	-
@action-sheet-subname-line-height	@line-height-sm	-
@action-sheet-close-icon-size	22px	-
@action-sheet-close-icon-color	@gray-5	-
@action-sheet-close-icon-active-color	@gray-6	-
@action-sheet-close-icon-padding	0 @padding-md	-
@action-sheet-cancel-text-color	@gray-7	-
@action-sheet-cancel-padding-top	@padding-xs	-
@action-sheet-cancel-padding-color	@background-color	-
@action-sheet-loading-icon-size	22px	-