vue3.0 + TS + AntD 项目开发学习笔记：Select 选择器的使用（二）

Select 选择器的使用在第一篇中已经介绍过。篇中有提到选择器可以实现带有远程搜索的应用。就是在输入关键字的过程中就实时地远程请求网络数据。但是结合实际项目，发现搜索数据量庞大加上是远程搜索，数据库不在本地，实时请求会造成网络拥堵，请求超时，所以项目想要调整 Select 选择器的应用，一开始造成堵塞以为是网络请求太频繁导致，于是限制关键字长度，希望关键字达到一定长度再做请求，虽然改善了一点，但是偶尔还是会导致请求超时，并且这种方式有局限性，因为限制关键字长度对使用者体验不好，不太友好。排除这个方式就决定采用输入完关键字按回车或者失去焦点时请求网络数据。代码如下：

 <a-select class="select" v-model:value="curValue" show-search 
    :default-active-first-option="false" :show-arrow="false" :filter-option="false"
      :not-found-content="searching ? undefined : null"
       :options="useCustomerStore().customerOptions"
       :field-names="{ value: 'customerCode', label: 'customerName' }" @search="onSearch" @change="onChange"
       :open="selectOpen" @click="selectOpen = !selectOpen" @blur="onBlur"
       v-on:keyup.enter="onSearchCustomer">
        <template v-if="searching" #notFoundContent>
        <a-spin size="small" />
       </template>
 </a-select>

• @search 输入关键字触发，调用方法 onSearch, 这个目的是为了抓取关键字，在后面需要调用。

const onSearch = (val: string) => {
   curValue.value = val.trim()
}

• :open = "selectOpen" 绑定 selectOpen 是否加载搜索结果标志位。
• v-on:keyup.enter="onSearchCustomer" 按回车时调用方法 onSearchCustomer，通过关键字 curValue.value 网络请求远程数据。selectOpen 加载结果标志位设置为 true，显示下拉选项。

const onSearchCustomer = () => {
   if (!curValue.value || !isNaN(curValue.value)) {
       return
   }
   handleSearch(curValue.value)
   selectOpen.value = true
}

• @blur 失去焦点时触发，调用方法 onBlur, 同样去调用方法 onSearchCustomer 请求网络数据。

const onBlur = () => {
    selectOpen.value = false
    onSearchCustomer()
}

这里 selectOpen 加载结果标志位设置为 false。选项不改变时起到失去焦点作用。

• @click 点击输入框时触发事件，起到显示和隐藏下拉菜单的作用。
• @change 当下拉选项改变时触发，调用 onChange 方法，同时将 selectOpen 加载结果标志位设置为 false。

const onChange = (value: string, option: any) => {
    emit('onChange', value, option)
    selectOpen.value = false
}

以上内容就是 Select 选择器在本项目中的一个延伸用法。