DropdownMenu 下拉選單 及 三目運算
阿新 • • 發佈:2021-06-28
<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>