ActionSheet 动作面板

从底部弹出的动作菜单面板。

组件类型

基本用法

通过 v-model 设置显示隐藏。

actions 类型为 Array，数组内部对象结构如下：

参数	说明	类型
name	选项名称	string
description	描述信息	string
color	颜色	string

<wd-toast />
<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />

const show = ref<boolean>(false)
const actions = ref([
  {
    name: '选项1'
  },
  {
    name: '选项2'
  },
  {
    name: '选项3',
    description: '描述信息'
  }
])

function showActions() {
  show.value = true
}

function close() {
  show.value = false
}

const toast = useToast()

function select({ item, index }) {
  toast.show(`当前选中项: ${item.name}, 下标: ${index}`)
}

自定义单行面板

自定义单行面板时，panels 类型为一维数组，数组内部对象结构如下：

参数	说明	类型
icon	图标名或图片地址	string
title	标题	string

<wd-button @click="showActions">弹出菜单</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: '微信好友'
  },
  {
    icon: 'share-internal',
    title: '朋友圈'
  },
  {
    icon: 'message',
    title: 'QQ 好友'
  },
  {
    icon: 'star-fill',
    title: '收藏'
  },
  {
    icon: 'share-internal',
    title: '更多分享'
  },
  {
    icon: 'user-add',
    title: '邀请好友'
  }
])
function showActions() {
  show.value = true
}

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

function select({ item, index }) {
  toast.show(`当前选中项: ${item.title}, 下标: ${index}`)
}

自定义多行面板

自定义多行面板时，panels 类型为多维数组，每个数组内部对象结构如下：

参数	说明	类型
icon	图标名或图片地址	string
title	标题	string

<wd-button @click="showActions">弹出菜单</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: '微信好友'
    },
    {
      icon: 'share-internal',
      title: '朋友圈'
    },
    {
      icon: 'message',
      title: 'QQ 好友'
    },
    {
      icon: 'star-fill',
      title: '收藏'
    },
    {
      icon: 'user-add',
      title: '邀请'
    },
    {
      icon: 'share-external',
      title: '外部分享'
    },
    {
      icon: 'qrcode',
      title: '生成二维码'
    },
    {
      icon: 'save',
      title: '保存图片'
    }
  ],
  [
    {
      icon: 'file-image',
      title: '图片'
    },
    {
      icon: 'download',
      title: '下载'
    },
    {
      icon: 'copy',
      title: '复制链接'
    }
  ]
])

function showActions() {
  show.value = true
}

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

function select1({ item, rowIndex, colIndex }) {
  toast.show(`当前选中项: ${item.title}, 行下标: ${rowIndex}, 列下标: ${colIndex}`)
}

组件状态

选项状态

可以设置颜色、禁用、加载等状态。

<wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet v-model="show" :actions="actions" @close="close" />

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

function close() {
  show.value = false
}

组件变体

取消按钮

设置 cancel-text 取消按钮文案，展示取消按钮。

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

标题

设置 title 展示标题。

<wd-action-sheet v-model="show" title="标题" @close="close">
  <view style="padding: 15px 15px 150px 15px;">内容</view>
</wd-action-sheet>

Attributes

参数	说明	类型	默认值
v-model	设置菜单显示隐藏	boolean	false
actions	菜单选项，详见下方 Action 数据结构	Action[]	[]
panels	自定义宫格面板项，支持一维 Panel[] 与二维 Panel[][]（多行）	Array<Panel | Panel[]>	[]
title	标题	string	-
cancel-text	取消按钮文案	string	-
close-on-click-action	点击选项后是否关闭菜单	boolean	true
close-on-click-modal	点击遮罩是否关闭	boolean	true
duration	动画持续时间（ms）	number	200
z-index	菜单层级	number	10
lazy-render	弹层内容懒渲染，触发展示时才渲染内容	boolean	true
safe-area-inset-bottom	弹出面板是否设置底部安全距离（iPhone X 类型机型）	boolean	true
root-portal	是否从页面中脱离出来（H5: teleport，App: renderjs，小程序: root-portal）	boolean	false
custom-title-class	标题区域自定义类名	string	-
custom-class	根节点自定义类名	string	-
custom-style	根节点自定义样式	string	-

Events

事件名称	说明	参数
select	点击选项时触发	菜单选项或自定义面板一维数组：{ item, index }；自定义面板二维数组：{ item, rowIndex, colIndex }
enter	打开动画开始时触发	-
after-enter	打开动画结束时触发	-
leave	关闭动画开始时触发	-
after-leave	关闭动画结束时触发	-
close	面板关闭时触发	-
click-modal	点击遮罩时触发	-
cancel	点击取消按钮时触发	-

Action 数据结构

键名	说明	类型
name	选项名称	string
description	描述信息	string
color	颜色	string
disabled	禁用	boolean
loading	加载中状态	boolean

Panel 数据结构

键名	说明	类型
icon	图标名或图片地址	string
title	标题内容	string

Slots

name	说明	参数
default	自定义内容区，传入后会覆盖默认 actions/panels 渲染	-
close	自定义标题栏右侧关闭区域	{ 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	加载图标尺寸

源代码

文档

• 组件