vant/packages/actionsheet/en-US.md

Actionsheet

Install

import { Actionsheet } from 'vant';

Vue.use(Actionsheet);

Usage

Basic Usage

Use actions prop to set options of actionsheet.

<van-actionsheet v-model="show" :actions="actions" />

export default {
  data() {
    return {
      show: false,
      actions: [
        {
          name: 'Option',
          callback: this.onClick
        },
        {
          name: 'Option',
          description: 'Description'
        },
        {
          name: 'Option',
          loading: true
        },
        {
          name: 'Disabled Option',
          disabled: true
        }
      ]
    };
  },

  methods: {
    onClick(item) {
      Toast(item.name);
    }
  }
}

Actionsheet with cancel button

<van-actionsheet v-model="show" :actions="actions" cancel-text="Cancel" />

Actionsheet with title

Actionsheet will get another style if there is a title prop.

<van-actionsheet v-model="show" title="Title">
  <p>Content</p>
</van-actionsheet>

API

Attribute	Description	Type	Default
actions	Options	Array	[]
title	Title	String	-
cancel-text	Text of cancel button	String	-
overlay	Whether to show overlay	Boolean	-
close-on-click-overlay	Whether to close when click overlay	Boolean	-
get-container	Return the mount node for actionsheet	() => HTMLElement	-

Event

Event	Description	Arguments
cancel	Triggered when cancel click	-

Data struct of actions

key	Description
name	Title
subname	Subtitle
className	className for the option
loading	Whether to be loading status
disabled	Whether to be disabled
callback	Triggered when click option