首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册ActionSheet组件：
<template>
<div>
<van-button @click="showActionSheet">打开动作面板</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { ActionSheet } from 'vant';
export default {
components: {
[ActionSheet.name]: ActionSheet,
},
setup() {
const showActionSheet = () => {
ActionSheet({
title: '请选择操作',
actions: [
{ name: '选项一' },
{ name: '选项二' },
{ name: '选项三', subname: '副文本' },
],
onSelect: (item, index) => {
console.log(item, index);
},
});
};
return {
showActionSheet,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的showActionSheet函数，用于打开动作面板。然后，在模板中使用<van-button>标签引入了Vant3的按钮组件，并通过@click监听按钮点击事件，触发showActionSheet方法。
在showActionSheet方法中，我们调用ActionSheet函数打开动作面板。通过title设置面板标题，通过actions设置面板中的选项。onSelect回调函数在用户选择一个选项时被触发，提供了选项对象和选项索引作为参数。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5734/Vant