Van Action Sheet

Vant ActionSheet Component

A bottom modal panel component containing multiple options related to the current situation, commonly used for action selection.

When to Invoke

Invoke this skill when:

• User needs to implement an action selection menu from the bottom
• User wants to display a list of options for user to choose
• User needs to show contextual actions related to specific content
• User wants to create a custom bottom panel with content
• User asks about implementing share menus or action menus

Features

• Multiple Options: Display a list of actionable options
• Icons Support: Each option can have an icon
• Option States: Support loading, disabled, and colored options
• Cancel Button: Optional cancel button at the bottom
• Description: Support description text above options
• Custom Content: Full customization through slots
• Safe Area: Automatic bottom safe area adaptation
• Teleport: Support mounting to specified element

API Reference

Props

ActionSheetAction Data Structure

Events

Slots

Usage Examples

Basic Usage

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

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const show = ref(false)
const actions = [
  { name: 'Option 1' },
  { name: 'Option 2' },
  { name: 'Option 3' }
]

const => {
  show.value = false
  showToast(item.name)
}
</script>

With Icons

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

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const show = ref(false)
const actions = [
  { name: 'Option 1', icon: 'cart-o' },
  { name: 'Option 2', icon: 'shop-o' },
  { name: 'Option 3', icon: 'star-o' }
]

const => {
  show.value = false
  showToast(item.name)
}
</script>

With Cancel Button

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

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'

const show = ref(false)
const actions = [
  { name: 'Option 1' },
  { name: 'Option 2' },
  { name: 'Option 3' }
]

const => showToast('cancel')
</script>

Option Status

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

<script setup>
import { ref } from 'vue'

const show = ref(false)
const actions = [
  { name: 'Colored Option', color: '#ee0a24' },
  { name: 'Disabled Option', disabled: true },
  { name: 'Loading Option', loading: true }
]
</script>

Custom Panel

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

<script setup>
import { ref } from 'vue'

const show = ref(false)
</script>

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

Common Issues

1. ActionSheet Not Closing After Selection

Set close-on-click-action to true or manually set show to false:

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

2. Custom Styling for Options

Use the className property in actions:

const actions = [
  { name: 'Special Option', className: 'custom-option' }
]

3. Async Close Before Action

Use before-close callback:

<van-action-sheet v-model:show="show" :actions="actions" :before-close="beforeClose" />

<script setup>
const beforeClose = (action) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(true), 1000)
  })
}
</script>

Component Interactions

With Cell Component

<template>
  <van-cell-group>
    <van-cell is-link title="Edit Profile" @click="showActions('edit')" />
    <van-cell is-link title="Settings" @click="showActions('settings')" />
  </van-cell-group>
  
  <van-action-sheet v-model:show="show" :actions="currentActions" />
</template>

With Toast Feedback

<template>
  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
</template>

<script setup>
import { showToast } from 'vant'

const => {
  show.value = false
  showToast(`Selected: ${item.name}`)
}
</script>

Best Practices

1. Limit options: Keep the number of options reasonable (3-7) for better UX
2. Clear naming: Use clear and concise option names
3. Destructive actions: Use red color for destructive actions like delete
4. Loading state: Show loading state for async operations
5. Cancel option: Always provide a way to cancel the action
6. Safe area: Keep safe-area-inset-bottom enabled for iOS devices