技術標籤：vue 後臺元件

目錄

• • vue 之 簡單的下拉選單元件
  • • XSelect.vue
    • 使用元件

vue 之 簡單的下拉選單元件

XSelect.vue

<!-- 下拉選單元件 -->
<template>
  <div class="x_select" ref="x_select">
    <div class="select_wrap" @click="selectClick">
      <div class="current_value"
 
>{{ currentValue }}</div>
      <div ref="triangle" class="triangle triangle_up"></div>
    </div>
    <div class="option_wrapper" ref="optionwrapper" style="display: none">
      <ul ref="optionul">
        <
 
li
          v-for="(item, idx) in subject"
          :key="item.id"
          ref="optionitem"
          @click="itemClick(item)"
          @mouseover="move($event, idx)"
          @mouseout="out($event)"
          :class="idx == currentNum ? 'active' : ''"
 

        >
          {{ item.lab }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "XSelect",
  components: {},
  props: {
    // 下拉選單的資料
    subject: {
      type: Array,
      default() {
        return [];
      },
    },
    defaultValue: {
      type: String,
      default: "請選擇",
    },
    selectWidth: {
      default: 160,
    },
    selectHeight: {
      default: 24,
    },
  },
  data() {
    return {
      currentValue: this.defaultValue,
      currentNum: 0,
    };
  },
  computed: {
    optionWrapper() {
      //選項的節點
      return this.$refs.optionwrapper;
    },
    triangle() {
      //三角的節點
      return this.$refs.triangle;
    },
    subjectList() {
      //選項的 item
      return this.$refs.optionitem;
    },
  },
  mounted() {
    this.$refs.x_select.style.width = this.selectWidth + "px";
    this.$refs.x_select.style.height = this.selectHeight + "px";
    this.$refs.x_select.style.lineHeight = this.selectHeight + "px";
    this.$refs.optionwrapper.style.width = this.selectWidth + "px";
  },
  methods: {
    isShow() {
      if (this.optionWrapper.style.display === "none") {
        this.optionWrapper.style.display = "block";
        this.$refs.triangle.classList.add("triangle_down");
        this.$refs.triangle.classList.remove("triangle_up");
      } else if (this.optionWrapper.style.display === "block") {
        this.optionWrapper.style.display = "none";
        this.$refs.triangle.classList.add("triangle_up");
        this.$refs.triangle.classList.remove("triangle_down");
      }
    },
    selectClick() {
      this.isShow();
    },
    itemClick(item) {
      this.currentValue = item.lab;
      this.isShow();
      this.$emit("changeSelect", item);
    },
    move(event, idx) {
      for (let item of this.subjectList) {
        item.classList.remove("hover");
      }
      this.currentNum = idx;
      event.currentTarget.classList.add("hover");
    },
    out(event) {
      event.currentTarget.classList.remove("hover");
    },
  },
};
</script>
<style  lang="scss" scoped>
ul,
li {
  list-style: none;
}
.x_select {
  position: relative;
  .select_wrap {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #141a21;
    background: #fff;
  }
  // 三角形
  .triangle {
    position: absolute;
    top: 30.5%;
    right: 5.5%;
    transition: 0.3s;
  }
  .triangle_up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid red;
  }
  .triangle_down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid red;
  }
  .active {
    color: #e82323;
    background: #f5f7fa !important;
  }
  .hover {
    color: #e82323;
    background: #f5f7fa !important;
  }
  .current_value {
    padding-left: 5px;
  }
  .option_wrapper {
    position: absolute;
    z-index: 3;
    left: 0px;
    top: 40px;
    background: #fff;
    transition: 0.3s;
    ul {
      li {
        padding-left: 5px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 5px;
        transition: 0.3s;
        background: #fff;
      }
    }
  }
}
</style>

使用元件

              <XSelect
                :subject="subject"
                @changeSelect="changeSelect"
                :defaultValue="defaultValue"
                selectWidth="354"
                selectHeight="32"
              ></XSelect>

       subject: [
         {
           value: "1",
           lab: "T空調",
         },
        {
           value: "2",
           lab: ""冰箱,
         },
       ],
      defaultValue: "全部",

    changeSelect(item) {
      this.defaultValue = item.lab;
      // localStorage.setItem("currentIndustry", JSON.stringify(item.lab));
    },