ant design vue select二次封装

<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="k-filter-select">
    <a-select
      ref="select"
      :class="['k-select', { 'k-value': isValue }]"
      v-model="input.value"
      :mode="input.mode"
      :disabled="input.disabled"
      showArrow
      show-search
      :filter-option="false"
      @search="onSearch"
      v-on="$listeners"
      allowClear
    >
      <div v-if="builderName" slot="dropdownRender">
        <slot :name="builderName"></slot>
      </div>
      <a-select-option v-else v-for="option in options" :key="option.value" :value="option.value">
        {{ option.label }}
      </a-select-option>
    </a-select>
    <span class="k-lable">{{ input.required ? '* ' + input.label : input.label }}</span>
  </div>
</template>

<script>
export default {
  name: 'KfilterSelect',
  props: {
    input: {
      type: Object,
      default: () => {}
    },
    builderName: {
      type: String,
      default: ''
    }
  },
  watch: {
    'input.options': {
      deep: true,
      immediate: true,
      handler(v) {
        this.options = v || []
      }
    }
  },
  data() {
    return {
      options: []
    }
  },
  computed: {
    isValue({ input }) {
      this.options = this.input.options //只要值变更，下拉框还原
      if (input.mode === 'multiple') {
        return !!(input.value && input.value.length)
      }
      return !!input.value
    }
  },
  methods: {
    onSearch(value) {
      if (!value) {
        this.options = this.input.options
        return false
      }
      this.options = this.input.options.filter(item => item.label.toString().includes(value))
    }
  }
}
</script>

<style lang="less" scoped>
.k-filter-select {
  position: relative;
  .k-select {
    // padding: 4px 15px;
    width: 100%;
  }
  .k-lable {
    position: absolute;
    padding: 0 2px;
    top: 6px;
    left: 13px;
    color: #a8abb2;
    z-index: 21;
    transition: all 0.2s;
    pointer-events: none;
  }
  .ant-select-focused ~ .k-lable {
    top: -15px;
    left: 9px;
    color: #ffa500;
    background-color: #fff;
  }
  .k-value ~ .k-lable {
    top: -15px;
    left: 9px;
    color: #ffa500;
    background-color: #fff;
  }
}
</style>