Skip to content

action-sheet

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

action-sheet

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
test
test
 
 
README.md
README.md
 
 
README.zh-CN.md
README.zh-CN.md
 
 
index.less
index.less
 
 
index.tsx
index.tsx
 
 

README.md

ActionSheet

Install

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

Vue.use(ActionSheet);

Usage

Basic Usage

Use actions prop to set options of action-sheet.

<van-action-sheet
  v-model="show"
  :actions="actions"
  @select="onSelect"
/>
export default {
  data() {
    return {
      show: false,
      actions: [
        { name: 'Option' },
        { name: 'Option' },
        { name: 'Option', subname: 'Description' }
      ]
    };
  },

  methods: {
    onSelect(item) {
      this.show = false;
      Toast(item.name);
    }
  }
}

Status

<van-action-sheet
  v-model="show"
  :actions="actions"
/>
export default {
  data() {
    return {
      show: false,
      actions: [
        { name: 'Option', color: '#07c160' },
        { loading: true },
        { name: 'Disabled Option', disabled: true }
      ]
    };
  }
}

ActionSheet with cancel button

<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="Cancel"
  @select="onSelect"
  @cancel="onCancel"
/>

ActionSheet with title

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

API

Props

Attribute Description Type Default
actions Options Action[] []
title Title string -
cancel-text Text of cancel button string -
overlay Whether to show overlay boolean true
round Whether to show round corner boolean false
close-on-click-action Whether to close when click action boolean false
close-on-click-overlay Whether to close when click overlay boolean true
lazy-render Whether to lazy render util appeared boolean true
lock-scroll Whether to lock background scroll boolean true
duration Transition duration, unit second number 0.3
get-container Return the mount node for action-sheet `string () => HTMLElement`
safe-area-inset-bottom Whether to enable bottom safe area adaptation, to enable those features use viewport-fit=cover in the viewport meta tag boolean false

Events

Event Description Arguments
select Triggered when click option item, index
cancel Triggered when cancel click -
click-overlay Triggered when click overlay -
open Triggered when open ActionSheet -
opened Triggered when opened ActionSheet -
close Triggered when close ActionSheet -
closed Triggered when closed ActionSheet -

Data Structure of Action

Key Description Type
name Title string
subname Subtitle string
color Text color string
className className for the option any
loading Whether to be loading status boolean
disabled Whether to be disabled boolean