[新增] select组件支持关键词筛选列表

This commit is contained in:
castleiMac
2022-04-03 17:29:02 +08:00
parent d686c7ef41
commit 49f5997934
3 changed files with 39 additions and 28 deletions

View File

@@ -61,8 +61,8 @@ const selectItem = ref<SelectItem>({
value: !props.multiple
? props.modelValue
: props.modelValue
? ([] as any[]).concat(props.modelValue)
: [],
? ([] as any[]).concat(props.modelValue)
: [],
label: props.multiple ? [] : null,
multiple: props.multiple,
} as SelectItem);
@@ -96,6 +96,22 @@ watch(props, () => {
// 禁止操作子项
const disabledItemMap: { [key: string | number]: boolean } = {};
const txt = ref("")
const input = ref(false)
const value = computed({
set(v: any) {
txt.value = v;
},
get() {
if (input.value) {
return txt.value;
}
// return txt.value;
return !selectItem.value.multiple && selectItem.value.value !== null
? selectItem.value.label
: null
}
})
const selectItemHandle = function (
_selectItem: SelectItem,
isChecked?: boolean
@@ -103,6 +119,7 @@ const selectItemHandle = function (
if (!props.multiple) {
openState.value = false;
}
txt.value = ""
disabledItemMap[_selectItem.value as string | number] =
_selectItem.disabled as boolean;
if (typeof isChecked !== "boolean") {
@@ -144,6 +161,7 @@ const selectItemPush = function (p: SelectItem) {
provide("selectItemHandle", selectItemHandle);
provide("selectItemPush", selectItemPush);
provide("selectItem", selectItem);
provide("keyword", txt)
</script>
<template>
@@ -157,18 +175,15 @@ provide("selectItem", selectItem);
type="text"
:placeholder="
selectItem.value !== null &&
Array.isArray(selectItem.value) &&
selectItem.value.length > 0
Array.isArray(selectItem.value) &&
selectItem.value.length > 0
? ''
: emptyMessage ?? placeholder
"
:disabled="disabled"
readonly
:value="
!selectItem.multiple && selectItem.value !== null
? selectItem.label
: null
"
v-model="value"
@input="input = true"
@blur="input = false"
:name="name"
:class="[
'layui-input',
@@ -204,8 +219,7 @@ provide("selectItem", selectItem);
: null,
})
"
>
</i>
></i>
</lay-badge>
</template>
</div>

View File

@@ -22,6 +22,7 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
const selectItem = inject("selectItem") as Ref<SelectItem>;
const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
const keyword = inject('keyword') as Ref<string>
const selectHandle = function () {
!props.disabled && callSelectItemHandle(!selected.value);
@@ -45,7 +46,7 @@ const selected = computed({
}
return selectItem.value.value === props.value;
},
set(val) {},
set(val) { },
});
const callSelectItemPush = function () {
let item = {
@@ -64,17 +65,13 @@ onMounted(() => {
<template>
<dd
v-show="keyword ? props.label.includes(keyword) : true"
:value="value"
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
@click="selectHandle"
>
<template v-if="selectItem.multiple">
<lay-checkbox
skin="primary"
v-model="selected"
@change="selectHandle"
label=""
/>
<lay-checkbox skin="primary" v-model="selected" @change="selectHandle" label />
</template>
<slot>{{ label }}</slot>
</dd>