🐛(component): 修复 select 搜索拼字响应性能底下的问题
This commit is contained in:
parent
b9f258f645
commit
76320b5eda
@ -68,6 +68,7 @@ const multipleValue = ref([]);
|
||||
const emits = defineEmits<SelectEmits>();
|
||||
const openState: Ref<boolean> = ref(false);
|
||||
const options = ref<any>([]);
|
||||
const composing = ref(false);
|
||||
var timer: 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(() => {
|
||||
intOption();
|
||||
timer = setInterval(intOption, 500);
|
||||
@ -155,6 +165,7 @@ const multiple = computed(() => {
|
||||
});
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
if (composing.value) return;
|
||||
emits("search", value);
|
||||
searchValue.value = value;
|
||||
};
|
||||
@ -209,13 +220,15 @@ provide("multiple", multiple);
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
v-model="singleValue"
|
||||
:modelValue="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:disabled="disabled"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
:size="size"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
@Input="handleSearch"
|
||||
@clear="handleClear"
|
||||
>
|
||||
@ -230,9 +243,11 @@ provide("multiple", multiple);
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
v-model="searchValue"
|
||||
:modelValue="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
@Input="handleSearch"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
|
@ -117,12 +117,12 @@ export default {
|
||||
|
||||
<template>
|
||||
<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="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
</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="2" label="编码"></lay-select-option>
|
||||
<lay-select-option value="3" label="运动"></lay-select-option>
|
||||
@ -138,6 +138,9 @@ export default {
|
||||
|
||||
const value3 = ref('1')
|
||||
const value4 = ref(['1'])
|
||||
const search = function() {
|
||||
console.log("触发")
|
||||
}
|
||||
|
||||
const search = function() {
|
||||
console.log("触发")
|
||||
|
Loading…
Reference in New Issue
Block a user