首先，确保你已经安装了 Vant4：
npm install vant@next
然后，你可以在你的 Vue 组件中引入需要的反馈组件并使用：
<template>
<div>
<van-button @click="showActionSheet">显示动作面板</van-button>
<van-button @click="showDialog">显示对话框</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Button, ActionSheet, Dialog } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Button.name]: Button,
[ActionSheet.name]: ActionSheet,
[Dialog.name]: Dialog,
},
setup() {
const showActionSheet = () => {
ActionSheet({
title: '操作面板',
actions: [
{ name: '选项一' },
{ name: '选项二' },
{ name: '选项三' },
],
cancelText: '取消',
onSelect: (item, index) => {
console.log(`选择了第 ${index + 1} 个选项，内容为：${item.name}`);
},
});
};
const showDialog = () => {
Dialog({
title: '提示',
message: '这是一个对话框',
confirmButtonText: '确定',
cancelButtonText: '取消',
onConfirm: () => {
console.log('点击了确定按钮');
},
onCancel: () => {
console.log('点击了取消按钮');
},
});
};
return {
showActionSheet,
showDialog,
};
},
};
</script>
在上面的例子中，我们使用了 van-action-sheet 和 van-dialog 组件，并通过调用相应的函数来显示它们。
这里的例子中只是简单的演示了一些反馈组件的使用，具体的属性和方法可以根据实际需求进行调整。
转载请注明出处：http://www.zyzy.cn/article/detail/5818/Vant