vant滑动,vant左右滑动组件,vant 加载动画,vant菜单,vant 滑动单元格,vant动画
Vant4 ActionSheet 动作面板是一个在移动端常用的用户交互组件，它可以展示一组操作选项供用户选择，通常会在用户点击某个按钮或者触发了某些事件后弹出。

具体来说，Vant4 ActionSheet 可以包含多个操作按钮，并且每个按钮都可以自定义文本、颜色等属性。当用户点击其中一个按钮时，系统会触发相应的回调函数，开发者可以使用这个回调函数来执行相关的业务逻辑。

以下是一个 Vant4 ActionSheet 的例子：

html
<!-- 在模板中引入 vant 组件库 -->
<template>
<div>
<van-button @click="showActionSheet">显示动作面板</van-button>
<van-action-sheet :actions="actions" v-model="show"></van-action-sheet>
</div>
</template>

<script>
import { ref } from 'vue';
import { ActionSheet } from 'vant';

export default {
setup() {
// 定义状态 show 和 actions
const show = ref(false);
const actions = [
{ name: '选项一', color: '#ee0a24' },
{ name: '选项二', color: '#1989fa' },
{ name: '选项三', color: '#00adb5' },
{ name: '取消', color: '#666' },
];

// 定义方法 showActionSheet，用于显示/隐藏动作面板
const showActionSheet = () => {
show.value = true;
};

return {
show,
actions,
showActionSheet,
};
},
};
</script>


在上面的示例中，我们使用 van-button 组件创建了一个按钮，并且给它绑定了 showActionSheet 方法。当用户点击这个按钮时，会触发 showActionSheet 方法，通过设置 show 状态为 true，来显示动作面板。

<van-action-sheet> 是 Vant4 ActionSheet 的组件标签，我们将它放在了模板中，并且将 actions 和 show 分别绑定到了 <van-action-sheet> 组件的 :actions 和 v-model 属性上。actions 定义了动作面板中的操作选项，而 show 则表示当前动作面板是否显示。

当用户点击动作面板中的某个选项时，会触发对应的回调函数。例如，如果用户点击了名为“选项一”的按钮，则会触发 action-sheet:selected 事件，并将 actions 数组中第一个对象传递给回调函数。开发者可以在这个回调函数中执行相应的业务逻辑。