ant design vue select二次封装

最新推荐文章于 2025-04-11 19:00:00 发布

韩召华

最新推荐文章于 2025-04-11 19:00:00 发布

阅读量596

点赞数

文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/qq_43787947/article/details/134695699

版权

文章介绍了如何使用Vue开发一个名为KFilterSelect的自定义组件，它是一个带搜索功能的动态下拉选择器，可以根据输入值和props进行渲染和筛选。组件包含props、数据绑定、计算属性以及搜索方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 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>