DropdownMenu 下拉菜单 及 三目运算
<van-dropdown-menu active-color="#285FBD" close-on-click-outside>
<van-dropdown-item :title="sortName" ref="itemZ">
<div class="list_fors">
<div
:class="
acticeIndex == index
? 'listSort_title_active'
: 'listSort_title'
"
v-for="(item, index) in listSort"
:key="index"
@click="clickItem(item, '2')"
>
{{ item.title }}
<img
v-if="acticeIndex == index"
src="../../assets/qiBar/groupp.svg"
/>
</div>
</div>
</van-dropdown-item>
</van-dropdown-menu>
Vant官网:https://youzan.github.io/vant/#/zh-CN/dropdown-menu
data() {
return {
acticeIndex: 0, // 默认下标
listSort: [
{ index: 0, title: "默认" },
{ index: 1, title: "距离" },
{ index: 2, title: "评价" },
{ index: 3, title: "资质" },
],
sortName: "智能排序", // 默认名称
}
},
methods:{
clickItem(item, index) {
if (index == "2") {
this.sortName = item.title; // 动态显示下拉框标题名称
if (item.title == "默认") {
this.sortName = "智能排序";
}
this.acticeIndex = item.index;
this.$refs.itemZ.toggle(); // 对应上面代码 点击选项后 隐藏菜单(使用ref)
}
}
}
}
<style>
.listSort_title {
width: 30%;
height: 36px;
margin: 6px;
text-align: center;
line-height: 36px;
background: #f5f5f5;
color: #333333;
font-family: PingFangSC-Regular;
font-size: 15px;
cursor: pointer;
}
.listSort_title_active {
width: 30%;
height: 36px;
margin: 6px;
line-height: 36px;
font-family: PingFangSC-Regular;
background: #8da6cf;
border-radius: 8px;
font-size: 15px;
color: #285fbd;
text-align: center;
cursor: pointer;
background: url("../../assets/qiBar/groupp.svg") no-repeat; // 背景图片
background-position: right bottom; // 背景图片位置
background-size: 25px 25px; // 背景图片宽高
}
</style>
效果:


浙公网安备 33010602011771号