vant dropdownmenu 修改下拉选中样式

要修改 Vant DropdownMenu 组件下拉选中样式，可以使用 `active-color` 属性和 `active-class` 属性。

`active-color` 属性用于设置选中项的文字颜色，例如：

<van-dropdown-menu :active-color="'red'">
  <!-- 下拉菜单项 -->
</van-dropdown-menu>

`active-class` 属性用于设置选中项的自定义类名，可以通过 CSS 样式来修改选中项的样式，例如：

<van-dropdown-menu :active-class="'my-active-class'">
  <!-- 下拉菜单项 -->
</van-dropdown-menu>

然后在 CSS 中定义 `.my-active-class` 类的样式即可，例如：

.my-active-class {
  background-color: #f5f5f5;
}

这样选中的项就会有背景颜色了。

相关问题

vant dropdownmenu 修改下拉样式

如果您使用的是 Vant UI 的 DropdownMenu 组件，您可以使用以下 CSS 样式来修改下拉菜单的样式：

.van-dropdown-menu__dropdown {
  /* 修改下拉菜单的背景颜色 */
  background-color: #f5f5f5;
}

.van-dropdown-menu__item {
  /* 修改下拉菜单项的背景颜色 */
  background-color: #fff;
}

.van-dropdown-menu__title {
  /* 修改下拉菜单标题的颜色 */
  color: #333;
}

.van-dropdown-menu__item:hover {
  /* 修改下拉菜单项在鼠标悬停时的背景颜色 */
  background-color: #f2f2f2;
}

您可以根据自己的需求修改上述样式。如果您希望样式只在特定的 DropdownMenu 组件中生效，可以在该组件的 `class` 属性中添加一个自定义类名，然后在 CSS 中使用该类名进行样式设置，例如：

<van-dropdown-menu class="my-dropdown-menu">
  <!-- 下拉菜单内容 -->
</van-dropdown-menu>

.my-dropdown-menu .van-dropdown-menu__dropdown {
  /* 修改下拉菜单的样式 */
}

vant dropdownmenu 自定义下拉菜单

vant dropdownmenu 组件可以很方便地实现下拉菜单的功能，下面是一个简单的自定义下拉菜单的例子：

<template>
  <van-dropdown-menu @select="onSelect">
    <van-dropdown-item v-for="(item, index) in items" :key="index" :value="item.value">{{ item.label }}</van-dropdown-item>
  </van-dropdown-menu>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
        { label: '选项三', value: '3' },
      ],
    };
  },
  methods: {
    onSelect(value) {
      console.log(`选中了 ${value}`);
    },
  },
};
</script>

在这个例子中，我们使用了 vant 的 dropdownmenu 组件，并在其中使用了 dropdownitem 组件来展示下拉菜单的选项。在 data 中定义了菜单的选项，然后在 dropdownitem 中使用 v-for 循环来展示每个选项。当用户选择某个选项时，会触发 select 事件并调用 onSelect 方法，我们可以在这个方法中获取用户选择的值并进行相应的操作。