(select): 新增 search-method 属性

This commit is contained in:
就眠儀式 2022-11-20 18:18:18 +08:00
parent 16b25a9c9d
commit 710f616389
3 changed files with 21 additions and 7 deletions

View File

@ -31,6 +31,7 @@ export interface SelectProps {
disabled?: boolean; disabled?: boolean;
placeholder?: string; placeholder?: string;
searchPlaceholder?: string; searchPlaceholder?: string;
searchMethod?: Function;
modelValue?: any; modelValue?: any;
multiple?: boolean; multiple?: boolean;
items?: SelectOptionProps[]; items?: SelectOptionProps[];
@ -81,7 +82,6 @@ const getOption = (nodes: VNode[], newOptions: any[]) => {
if (item.children) { if (item.children) {
// @ts-ignore // @ts-ignore
const label = item.children.default()[0].children; const label = item.children.default()[0].children;
if (typeof label == "string") { if (typeof label == "string") {
// @ts-ignore // @ts-ignore
item.props.label = label; item.props.label = label;
@ -122,7 +122,6 @@ const onCompositionend = (event: Event) => {
onMounted(() => { onMounted(() => {
intOption(); intOption();
timer = setInterval(intOption, 500); timer = setInterval(intOption, 500);
watch( watch(
[selectedValue, options], [selectedValue, options],
() => { () => {
@ -188,6 +187,7 @@ provide("openState", openState);
provide("selectedValue", selectedValue); provide("selectedValue", selectedValue);
provide("searchValue", searchValue); provide("searchValue", searchValue);
provide("multiple", multiple); provide("multiple", multiple);
provide("searchMethod", props.searchMethod);
</script> </script>
<template> <template>

View File

@ -30,6 +30,7 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
const searchValue: Ref<string> = inject("searchValue") as Ref<string>; const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>; const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
const searchMethod: Function = inject("searchMethod") as Function;
const selectedValue: WritableComputedRef<any> = inject( const selectedValue: WritableComputedRef<any> = inject(
"selectedValue" "selectedValue"
) as WritableComputedRef<any>; ) as WritableComputedRef<any>;
@ -59,10 +60,16 @@ const selected = computed(() => {
} }
}); });
// , search-method
const isFirst = ref(true);
const display = computed(() => { const display = computed(() => {
if(searchMethod && !isFirst.value) {
isFirst.value = false;
return searchMethod(searchValue.value, props);
}
return ( return (
props.keyword?.toString().indexOf(searchValue.value) > -1 || props.keyword?.toString().indexOf(searchValue.value) > -1 || props.label?.toString().indexOf(searchValue.value) > -1
props.label?.toString().indexOf(searchValue.value) > -1
); );
}); });

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" :searchMethod="searchMethod">
<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" :searchMethod="searchMethod">
<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>
@ -139,9 +139,16 @@ export default {
const value3 = ref('1') const value3 = ref('1')
const value4 = ref(['1']) const value4 = ref(['1'])
const searchMethod = function(text, props) {
console.log(text);
console.log(props.label);
return text === props.label;
}
return { return {
value3, value3,
value4, value4,
searchMethod
} }
} }
} }