[新增] select组件支持关键词筛选列表
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user