vue select自定義組件

自定義select組件

相信大家很多時候都有這樣一種需求，不能用Ui框架，要自己手寫一個select組件之類的需求，當然我今天也遇到了。於是自己動手弄了一個非常簡單的select組件，但是這個卻是有一個問題，后面再來講問題是什么。

<template>
  <div class="xbsjselect">
    <div class="xbsjselect-selectdiv" @click="selectClick">
      <span class="xbsjselect-selectText">{{currentValue}}</span>
      <button class="xbsjselect-selectButton"></button>
    </div>
    <ul class="xbsjselect-selectOption" v-show="selectshow">
      <li v-for="(ct,index) in listdata" :key="index" @click="selectName(ct)">
        <span>{{ ct }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
        type:Array,
        default:[]
    },
    value:''
  },
  data() {
    return {
      selectshow: false,
      currentValue:this.value
    };
  },
  computed: {
    listdata() {
      return this.list;
    }
  },
  methods: {
    selectClick() {
      this.selectshow = !this.selectshow;
    },
    selectName(value) {
      this.currentValue = value;
      this.selectshow = false;
    }
  },
  watch: {
    currentValue(val, old) {
        this.$emit("input",val);
    }
  }
};
</script>

<style scoped>
.xbsjselect {
  position: relative;
  width: 100%;
}
.xbsjselect-selectdiv {
  display: inline-block;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  height: 28px;
  position: relative;
  text-align: left;
  line-height: 28px;
  cursor: pointer;
  padding-left: 13px;
  left: -2px;
  top: 2px;
  border-radius: 3px;
}
.xbsjselect-selectText {
  font-size: 12px;
}
.xbsjselect-selectButton {
  width: 12px;
  height: 10px;
  border: none;
  background: url(../../../images/titles-select.png) no-repeat;
  background-size: contain;
  cursor: pointer;
  float: right;
  margin-right: 20px;
  margin-top: 10px;
  outline: none;
}
.xbsjselect-selectOption {
  width: 100%;
  height: 80px;
  background: rgba(138, 138, 138, 1);
  border-radius: 0px 0px 4px 4px;
  list-style: none;
  overflow: auto;
  z-index: 1;
  position: absolute;
}

.xbsjselect-selectOption li {
  width: 100%;
  height: 20px;
  font-size: 14px;
  color: rgba(221, 221, 221, 1);
  line-height: 20px;
  cursor: pointer;
}
.xbsjselect-selectOption li span {
  display: inline-block;
  height: 20px;
  position: relative;
  left: 11px;
}
.xbsjselect-selectOption li:hover {
  background: rgba(107, 107, 107, 1);
}
</style>

這里引用了一個圖片。是一個小三角，需要可自行替換。