ActionSheet

Action menu panel that pops up from the bottom.

Component Type

Basic Usage

Control show/hide through v-model.

The actions type is Array, with the following object structure:

Parameter	Description	Type
name	Option name	string
description	Description info	string
color	Color	string

<wd-toast />
<wd-button @click="showActions">Show Menu</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />

const show = ref<boolean>(false)
const actions = ref([
  {
    name: 'Option 1'
  },
  {
    name: 'Option 2'
  },
  {
    name: 'Option 3',
    description: 'Description info'
  }
])

function showActions() {
  show.value = true
}

function close() {
  show.value = false
}

const toast = useToast()

function select({ item, index }) {
  toast.show(`Current selection: ${item.name}, index: ${index}`)
}

Custom Single Row Panel

When using custom single row panel, panels type is a one-dimensional array with the following object structure:

Parameter	Description	Type
icon	Icon name or image URL	string
title	Title	string

<wd-button @click="showActions">Show Menu</wd-button>
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />

const show = ref<boolean>(false)
const panels = ref([
  {
    icon: 'user',
    title: 'WeChat Friends'
  },
  {
    icon: 'share-internal',
    title: 'Moments'
  },
  {
    icon: 'message',
    title: 'QQ Friends'
  },
  {
    icon: 'star-fill',
    title: 'Favorites'
  },
  {
    icon: 'share-internal',
    title: 'More Share'
  },
  {
    icon: 'user-add',
    title: 'Invite Friends'
  }
])
function showActions() {
  show.value = true
}

function close() {
  show.value = false
}
const toast = useToast()

function select({ item, index }) {
  toast.show(`Current selection: ${item.title}, index: ${index}`)
}

Custom Multi-Row Panel

When using custom multi-row panel, panels type is a multi-dimensional array with the following object structure:

Parameter	Description	Type
icon	Icon name or image URL	string
title	Title	string

<wd-button @click="showActions">Show Menu</wd-button>
<wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select1" />

const show = ref<boolean>(false)
const panels = ref([
  [
    {
      icon: 'user',
      title: 'WeChat Friends'
    },
    {
      icon: 'share-internal',
      title: 'Moments'
    },
    {
      icon: 'message',
      title: 'QQ Friends'
    },
    {
      icon: 'star-fill',
      title: 'Favorites'
    },
    {
      icon: 'user-add',
      title: 'Invite'
    },
    {
      icon: 'share-external',
      title: 'External Share'
    },
    {
      icon: 'qrcode',
      title: 'Generate QR Code'
    },
    {
      icon: 'save',
      title: 'Save Image'
    }
  ],
  [
    {
      icon: 'file-image',
      title: 'Image'
    },
    {
      icon: 'download',
      title: 'Download'
    },
    {
      icon: 'copy',
      title: 'Copy Link'
    }
  ]
])

function showActions() {
  show.value = true
}

function close() {
  show.value = false
}
const toast = useToast()

function select1({ item, rowIndex, colIndex }) {
  toast.show(`Current selection: ${item.title}, row index: ${rowIndex}, column index: ${colIndex}`)
}

Component State

Option States

Can set color, disabled, loading and other states.

<wd-button @click="showActions">Show Menu</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" />

const show = ref<boolean>(false)
const actions = ref([
  {
    name: 'Color',
    color: '#0083ff'
  },
  {
    name: 'Disabled',
    disabled: true
  },
  {
    loading: true
  }
])
function showActions() {
  show.value = true
}

function close() {
  show.value = false
}

Component Variant

Cancel Button

Set cancel-text to display cancel button text.

<wd-action-sheet v-model="show" :actions="actions" @close="close" cancel-text="Cancel" />

Title

Set title to display title.

<wd-action-sheet v-model="show" title="Title" @close="close">
  <view style="padding: 15px 15px 150px 15px;">Content</view>
</wd-action-sheet>

Attributes

Parameter	Description	Type	Default Value
v-model	Control menu show/hide	boolean	false
actions	Menu options, see Action data structure below	Action[]	[]
panels	Custom grid panel items, supports one-dimensional Panel[] and two-dimensional Panel[][] (multi-row)	Array<Panel | Panel[]>	[]
title	Title	string	-
cancel-text	Cancel button text	string	-
close-on-click-action	Whether to close menu after clicking option	boolean	true
close-on-click-modal	Whether to close when clicking mask	boolean	true
duration	Animation duration (ms)	number	200
z-index	Menu z-index	number	10
lazy-render	Lazy render popup content, only render when triggered to show	boolean	true
safe-area-inset-bottom	Whether popup panel sets bottom safe distance (iPhone X type devices)	boolean	true
root-portal	Whether to detach from page (H5: teleport, App: renderjs, Mini Program: root-portal)	boolean	false
custom-title-class	Title area custom class name	string	-
custom-class	Root node custom class name	string	-
custom-style	Root node custom style	string	-

Events

Event Name	Description	Parameters
select	Triggered when clicking option	Menu options or custom panel one-dimensional array: { item, index }; Custom panel two-dimensional array: { item, rowIndex, colIndex }
enter	Triggered when open animation starts	-
after-enter	Triggered when open animation ends	-
leave	Triggered when close animation starts	-
after-leave	Triggered when close animation ends	-
close	Triggered when panel closes	-
click-modal	Triggered when clicking mask	-
cancel	Triggered when clicking cancel button	-

Action Data Structure

Key	Description	Type
name	Option name	string
description	Description info	string
color	Color	string
disabled	Disabled	boolean
loading	Loading state	boolean

Panel Data Structure

Key	Description	Type
icon	Icon name or image URL	string
title	Title content	string

Slots

name	Description	Parameters
default	Custom content area, will override default actions/panels rendering when passed	-
close	Custom title bar right close area	{ close }

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-action-sheet-bg	$filled-oppo	底部弹层背景色
--wot-action-sheet-radius	$radius-large	底部弹层圆角
--wot-action-sheet-action-bg	$filled-oppo	操作项背景色
--wot-action-sheet-action-font-size	$typography-title-size-main	操作项字体大小
--wot-action-sheet-action-line-height	$typography-title-line--height-size-main	操作项行高
--wot-action-sheet-action-color	$text-main	操作项文字颜色
--wot-action-sheet-action-padding	$padding-extra-loose $padding-loose	操作项内边距
--wot-action-sheet-gap-bg	$filled-bottom	取消按钮与操作项的间隔背景色
--wot-action-sheet-cancel-bg	$filled-oppo	取消按钮背景色
--wot-action-sheet-cancel-font-size	$typography-title-size-main	取消按钮字体大小
--wot-action-sheet-cancel-line-height	$typography-title-line--height-size-main	取消按钮行高
--wot-action-sheet-cancel-color	$text-main	取消按钮文字颜色
--wot-action-sheet-cancel-padding	$padding-extra-loose $padding-loose	取消按钮内边距
--wot-action-sheet-gap-height	$spacing-tight	取消按钮顶部外边距
--wot-action-sheet-description-font-size	$typography-body-size-main	描述文本字体大小
--wot-action-sheet-description-line-height	$typography-body-line--height-size-main	描述文本行高
--wot-action-sheet-description-color	$text-auxiliary	描述文本颜色
--wot-action-sheet-description-margin-top	$spacing-tight	描述文本顶部外边距
--wot-action-sheet-panel-bg	$filled-oppo	面板区域背景色
--wot-action-sheet-panels-wrap-padding	$padding-main $padding-zero	面板容器内边距
--wot-action-sheet-panels-padding	$padding-zero $padding-main	面板列表内边距
--wot-action-sheet-panel-width	$n-88	单个面板宽度
--wot-action-sheet-panel-padding	$padding-main $padding-zero	单个面板内边距
--wot-action-sheet-panel-img-size	$n-24	面板图片尺寸
--wot-action-sheet-panel-img-spacing	$spacing-zero auto $spacing-tight	面板图片外边距
--wot-action-sheet-panel-img-radius	$radius-main	面板图片圆角
--wot-action-sheet-panel-title-font-size	$typography-label-size-main	面板标题字体大小
--wot-action-sheet-panel-title-line-height	$typography-label-line--height-size-main	面板标题行高
--wot-action-sheet-panel-title-color	$text-auxiliary	面板标题颜色
--wot-action-sheet-title-bg	$filled-oppo	标题背景色
--wot-action-sheet-title-color	$text-main	标题文字颜色
--wot-action-sheet-title-height	$n-56	标题区域高度
--wot-action-sheet-title-font-size	$typography-title-size-main	标题字体大小
--wot-action-sheet-title-line-height	$typography-title-line--height-size-main	标题行高
--wot-action-sheet-title-font-weight	$font-weight-medium	标题字重
--wot-action-sheet-close-right	$spacing-loose	关闭图标右侧偏移
--wot-action-sheet-close-color	$icon-secondary	关闭图标颜色
--wot-action-sheet-close-font-size	$n-24	关闭图标尺寸
--wot-action-sheet-active-bg	$filled-content	激活态背景色
--wot-action-sheet-disabled-color	$text-disabled	禁用态文字颜色
--wot-action-sheet-loading-size	$n-20	加载图标尺寸

Source Code

Documentation

• Component