首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-action-sheet：
<template>
<div>
<van-button @click="showActionSheet">显示动作面板</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Button, ActionSheet } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Button.name]: Button,
[ActionSheet.name]: ActionSheet,
},
setup() {
const showActionSheet = () => {
ActionSheet({
title: '操作面板',
actions: [
{ name: '选项一' },
{ name: '选项二' },
{ name: '选项三' },
],
cancelText: '取消',
onSelect: (item, index) => {
console.log(`选择了第 ${index + 1} 个选项，内容为：${item.name}`);
},
});
};
return {
showActionSheet,
};
},
};
</script>
在上面的例子中，我们使用了 van-action-sheet 组件，并通过调用 ActionSheet 函数来显示动作面板。
ActionSheet 函数接受一个配置对象，其中 title 表示动作面板的标题，actions 是一个数组，表示动作面板的选项，cancelText 表示取消按钮的文本。通过监听 onSelect 事件，可以获取用户选择的选项和索引。
你可以根据实际需求，进一步设置其他属性来满足你的需求。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5819/Vant