如何修改vant中DropdownMenu组件选中后的样式

我们想要实现如下效果:选中下拉选项中的某一项后想让选中项的字体变色。
在这里插入图片描述

vant组件中只有选择过程中效果:
在这里插入图片描述
但选中之后字体又变成黑色呢。如何设置成想要的颜色呢?
在这里插入图片描述
我们发现这里有个title-class,标题额外类名。
在这里插入图片描述
同时我们可以通过审查元素发现vant中选中后多了下面的.van-dropdown-item__option–active类:
在这里插入图片描述
所以我们这里有一个很好的实现思路:
将title-class设置为van-dropdown-item__option–active。同时用一个变量控制是否为van-dropdown-item__option–active or “”(空的)。使用常用的三目运算就可以实现。
注:若有多个分组,如有区域、美食类型等等,我们可以分别给每项绑定不同的变量来控制是否使用van-dropdown-item__option–active类。