首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册DropdownMenu和DropdownItem组件：
<template>
<div>
<van-dropdown-menu v-model="activeKey" :active-color="activeColor">
<van-dropdown-item v-for="(item, index) in menuList" :key="index" :name="index">
{{ item }}
</van-dropdown-item>
</van-dropdown-menu>
<p>选中的项: {{ menuList[activeKey] }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';
export default {
components: {
[DropdownMenu.name]: DropdownMenu,
[DropdownItem.name]: DropdownItem,
},
setup() {
const menuList = ref(['菜单项1', '菜单项2', '菜单项3']);
const activeKey = ref(0);
const activeColor = '#1989fa'; // 设置选中项的文字颜色
return {
menuList,
activeKey,
activeColor,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建响应式的menuList、activeKey和activeColor变量。menuList用于存储下拉菜单的项，activeKey表示当前选中的项的索引，activeColor表示选中项的文字颜色。
在模板中，我们使用<van-dropdown-menu>标签引入了Vant3的DropdownMenu组件，并通过v-model将activeKey与选中项的索引进行绑定。使用<van-dropdown-item>标签引入了Vant3的DropdownItem组件，通过v-for遍历menuList数组，动态生成下拉菜单的选项。
通过上述设置，用户点击下拉菜单，activeKey变量会自动更新，从而获取用户选择的项的索引。在模板中，我们通过插值语法显示当前选中的项。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5736/Vant