快捷導(dǎo)航

Vue3?封裝一個支持輸入和單/多選InputSelect組件-Antd詳解

更新時間：2024年09月25日 12:08:36 作者：掉毛的小羊羔

Antd的Select組件默認(rèn)不支持作為輸入框使用或手動添加選項,為了實現(xiàn)這一功能,我們封裝了一個通用組件,支持單選和多選模式,并允許用戶在組件失焦時手動輸入選項,主要通過定義searchText存儲輸入數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧

寫在前面：

Antd提供的select組件是不支持當(dāng)作輸入框使用的，并且不支持在一級狀態(tài)下手動輸入選項，所以就封裝了一個和通用組件來實現(xiàn)上述功能。

組件效果：

單選模式：

多選模式：

實現(xiàn)步驟：

1.首先定義一個searchText存儲用戶輸入的數(shù)據(jù)，因為會觸發(fā)一個Antd定義的@Search事件，所以直接在onSearch數(shù)據(jù)收集即可

const searchText = ref('')
const onSearch = val => {
  // 去除首尾空格
  const text = val.trim()
  if (text) {
    searchText.value = text
  }
}

2.定義三個prop控制輸入的數(shù)據(jù)，組件模式以及是否允許輸入

const props = defineProps({
  value: {
    type: [Array, String, Number],
    default: undefined
  },
  mode: {
    type: String,
    default: ''
  },
  allowInputValue: {
    type: Boolean,
    default: true
  }
})

3.在組件失焦時完成數(shù)據(jù)傳遞，其實組件功能的核心就是在失焦時完成

首先，通過條件判斷allowInputValue.value && searchText.value判斷是否允許輸入且存在搜索文本。如果條件成立，繼續(xù)執(zhí)行下面的邏輯。

接著，通過判斷tempMode.value === 'multiple'判斷選擇模式是否為多選。

如果選擇模式為多選，則將搜索文本searchText.value添加到tempValue.value的數(shù)組中，即將搜索文本作為一個新的選項添加到選中值中。

如果選擇模式不是多選，則直接將搜索文本賦值給tempValue.value，即將搜索文本作為選中值。

然后，通過emit('change', tempValue.value)觸發(fā)change事件，并將當(dāng)前的選中值作為參數(shù)傳遞給父組件。

最后，將searchText.value清空，以便下一次輸入。

const emit = defineEmits(['update:value', 'update:mode', 'change'])
//組件失去焦點
const onBlur = () => {
  if (allowInputValue.value && searchText.value) {
    if (tempMode.value === 'multiple') {
      tempValue.value.push(searchText.value)
    } else {
      tempValue.value = searchText.value
    }
    emit('change', tempValue.value)
    searchText.value = ''
  }
}

4.定義$attrs以及slot支持進(jìn)一步拓展及支持a-select原生api

<template>
  <a-select
    v-bind="$attrs"
    v-model:value="tempValue"
    :mode="tempMode"
    @search="onSearch"
    @blur="onBlur"
    @change="onChange"
  >
    <template v-for="(item, key, index) in $slots" :key="index" #[key]>
      <slot :name="key"></slot>
    </template>
  </a-select>
</template>

完整代碼：

<template>
  <a-select
    v-bind="$attrs"
    v-model:value="tempValue"
    :mode="tempMode"
    @search="onSearch"
    @blur="onBlur"
    @change="onChange"
  >
    <template v-for="(item, key, index) in $slots" :key="index" #[key]>
      <slot :name="key"></slot>
    </template>
  </a-select>
</template>
<script setup>
import { computed, ref, toRefs } from 'vue'
const props = defineProps({
  value: {
    type: [Array, String, Number],
    default: undefined
  },
  mode: {
    type: String,
    default: ''
  },
  allowInputValue: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:value', 'update:mode', 'change'])
const { value, mode, allowInputValue } = toRefs(props)
const tempValue = computed({
  set: val => emit('update:value', val),
  get: () => value.value
})
const tempMode = computed({
  set: val => emit('update:mode', val),
  get: () => mode.value
})
const searchText = ref('')
const onSearch = val => {
  // 去除首尾
  const text = val.trim()
  if (text) {
    searchText.value = text
  }
}
const onBlur = () => {
  if (allowInputValue.value && searchText.value) {
    if (tempMode.value === 'multiple') {
      tempValue.value.push(searchText.value)
    } else {
      tempValue.value = searchText.value
    }
    emit('change', tempValue.value)
    searchText.value = ''
  }
}
const onChange = () => {
  emit('change', tempValue.value)
  searchText.value = ''
}
</script>
<style lang="scss" scoped></style>

使用范例：

單選：

  <InputSelect
      v-model:value="record.name"
      placeholder="請選擇或輸入"
      :options="headerOptions"
      allow-clear
      show-search
      max-tag-count="responsive"
     />

多選:

<InputSelect
  v-model:value="modelRef.actList"
  class="value-item"
  mode="multiple"
  placeholder="請選擇或輸入"
  :options="ACT_TYPES"
  allow-clear
  show-search
  max-tag-count="responsive"
  @change="onChange"
 />

到此這篇關(guān)于Vue3 封裝一個支持輸入和單/多選InputSelect組件-Antd詳解的文章就介紹到這了,更多相關(guān)Vue3 InputSelect組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: