🐛(component): 修复 select 搜索拼字响应性能底下的问题

This commit is contained in:
就眠儀式 2022-11-10 22:36:42 +08:00
parent b9f258f645
commit 76320b5eda
2 changed files with 22 additions and 4 deletions

View File

@ -68,6 +68,7 @@ const multipleValue = ref([]);
const emits = defineEmits<SelectEmits>(); const emits = defineEmits<SelectEmits>();
const openState: Ref<boolean> = ref(false); const openState: Ref<boolean> = ref(false);
const options = ref<any>([]); const options = ref<any>([]);
const composing = ref(false);
var timer: any; var timer: any;
const getOption = (nodes: VNode[], newOptions: any[]) => { const getOption = (nodes: VNode[], newOptions: any[]) => {
@ -109,6 +110,15 @@ const handleRemove = (value: any) => {
} }
}; };
const onCompositionstart = () => {
composing.value = true;
};
const onCompositionend = (event: Event) => {
composing.value = false;
handleSearch((event.target as HTMLInputElement).value);
};
onMounted(() => { onMounted(() => {
intOption(); intOption();
timer = setInterval(intOption, 500); timer = setInterval(intOption, 500);
@ -155,6 +165,7 @@ const multiple = computed(() => {
}); });
const handleSearch = (value: string) => { const handleSearch = (value: string) => {
if (composing.value) return;
emits("search", value); emits("search", value);
searchValue.value = value; searchValue.value = value;
}; };
@ -209,13 +220,15 @@ provide("multiple", multiple);
</lay-tag-input> </lay-tag-input>
<lay-input <lay-input
v-else v-else
v-model="singleValue" :modelValue="singleValue"
:placeholder="placeholder" :placeholder="placeholder"
:allow-clear="allowClear" :allow-clear="allowClear"
:readonly="!showSearch" :readonly="!showSearch"
:disabled="disabled" :disabled="disabled"
:class="{ 'layui-unselect': !showSearch }" :class="{ 'layui-unselect': !showSearch }"
:size="size" :size="size"
@compositionstart="onCompositionstart"
@compositionend="onCompositionend"
@Input="handleSearch" @Input="handleSearch"
@clear="handleClear" @clear="handleClear"
> >
@ -230,9 +243,11 @@ provide("multiple", multiple);
<dl class="layui-select-content"> <dl class="layui-select-content">
<div class="layui-select-search" v-if="multiple && showSearch"> <div class="layui-select-search" v-if="multiple && showSearch">
<lay-input <lay-input
v-model="searchValue" :modelValue="searchValue"
:placeholder="searchPlaceholder" :placeholder="searchPlaceholder"
@Input="handleSearch" @Input="handleSearch"
@compositionstart="onCompositionstart"
@compositionend="onCompositionend"
prefix-icon="layui-icon-search" prefix-icon="layui-icon-search"
size="sm" size="sm"
></lay-input> ></lay-input>

View File

@ -117,12 +117,12 @@ export default {
<template> <template>
<lay-space> <lay-space>
<lay-select v-model="value3" :show-search="true"> <lay-select v-model="value3" :show-search="true" @search="search">
<lay-select-option value="1" label="学习"></lay-select-option> <lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option> <lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option> <lay-select-option value="3" label="运动"></lay-select-option>
</lay-select> </lay-select>
<lay-select v-model="value4" :show-search="true" :multiple="true"> <lay-select v-model="value4" :show-search="true" :multiple="true" @search="search">
<lay-select-option value="1" label="学习"></lay-select-option> <lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option> <lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option> <lay-select-option value="3" label="运动"></lay-select-option>
@ -138,6 +138,9 @@ export default {
const value3 = ref('1') const value3 = ref('1')
const value4 = ref(['1']) const value4 = ref(['1'])
const search = function() {
console.log("触发")
}
const search = function() { const search = function() {
console.log("触发") console.log("触发")