vue-weui

Appearance

actionSheet 菜单 ​

actionsheet 弹出式菜单主要用于一些菜单操作.

基础使用 ​

显示代码
vue
<template>
  <weui-button @click="visibleActionSheet = true">打开action-sheet</weui-button>
  <weui-action-sheet
    v-model="visibleActionSheet"
    :menus="menus"
    title="这是标题"
    :actions="actions"
  ></weui-action-sheet>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const visibleActionSheet = ref(false);
const menus = [
  { label: '菜单1', id: 1 },
  { label: '菜单2', id: 2 }
];
const actions = [{ label: '取消', key: 'cancel' }];
</script>

API ​

ActionSheet Props ​

名称类型默认值说明版本
modelValuebooleanfalse是否显示actionSheet-
titlestring-标题内容-
menusActionSheetMenuOrActions[][]菜单列表-
actionsActionSheetMenuOrActions[][]操作列表-

ActionSheet Slots ​

名称参数说明版本
title-自定义标题区域-
menumenu: ActionSheetMenuOrActions自定义菜单项-
actionaction: ActionSheetMenuOrActions自定义操作项-

ActionSheet Events ​

名称描述参数版本
click点击menu或者actions触发(item: ActionSheetMenuOrActions) => void-
close关闭actionsheet触发() => void-

ActionSheet API ​

名称描述参数返回值版本
actionSheet通过函数的方式调起actionSheet展示ActionSheetOptionscloseActionSheetFn-