theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(select): 新增 search-method 属性

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package/component/src/component/select/index.vue
View File

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

13
package/component/src/component/selectOption/index.vue
View File

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

11
package/document-component/src/document/zh-CN/components/select.md
View File

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