1. 程式人生 > 其它 >DropdownMenu 下拉選單 及 三目運算

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>

效果: