✨(component): 修复 select 无法异步加载的问题
This commit is contained in:
就眠儀式
parent
1819e88ff0
commit
954e14bff6
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.5.0",
|
||||
"version": "1.5.1-alpha.1",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -1,220 +1,231 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySelect",
|
||||
};
|
||||
</script>
|
||||
export default {
|
||||
name: "LaySelect",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import {
|
||||
provide,
|
||||
computed,
|
||||
ref,
|
||||
Ref,
|
||||
useSlots,
|
||||
onMounted,
|
||||
VNode,
|
||||
Component,
|
||||
watch,
|
||||
} from "vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, {
|
||||
LaySelectOptionProps,
|
||||
} from "../selectOption/index.vue";
|
||||
<script setup lang="ts">
|
||||
import "./index.less";
|
||||
import {
|
||||
provide,
|
||||
computed,
|
||||
ref,
|
||||
Ref,
|
||||
useSlots,
|
||||
onMounted,
|
||||
VNode,
|
||||
Component,
|
||||
watch,
|
||||
nextTick,
|
||||
onUnmounted
|
||||
} from "vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, {
|
||||
LaySelectOptionProps,
|
||||
} from "../selectOption/index.vue";
|
||||
|
||||
export interface LaySelectProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
items?: LaySelectOptionProps[];
|
||||
size?: "lg" | "md" | "sm" | "xs";
|
||||
collapseTagsTooltip?: boolean;
|
||||
minCollapsedNum?: number;
|
||||
allowClear?: boolean;
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectEmits {
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", value: string): void;
|
||||
(e: "search", value: string): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LaySelectProps>(), {
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
showEmpty: true,
|
||||
emptyMessage: "请选择",
|
||||
searchPlaceholder: "请搜索",
|
||||
collapseTagsTooltip: true,
|
||||
minCollapsedNum: 3,
|
||||
disabled: false,
|
||||
multiple: false,
|
||||
allowClear: false,
|
||||
showSearch: false,
|
||||
size: "md",
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
const searchValue = ref("");
|
||||
const singleValue = ref("");
|
||||
const multipleValue = ref([]);
|
||||
const emits = defineEmits<SelectEmits>();
|
||||
const openState: Ref<boolean> = ref(false);
|
||||
const selectedItem: Ref<any> = ref([]);
|
||||
const options = ref<any>([]);
|
||||
|
||||
onMounted(() => {
|
||||
if (slots.default) {
|
||||
getOption(slots.default());
|
||||
export interface LaySelectProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
items?: LaySelectOptionProps[];
|
||||
size?: "lg" | "md" | "sm" | "xs";
|
||||
collapseTagsTooltip?: boolean;
|
||||
minCollapsedNum?: number;
|
||||
allowClear?: boolean;
|
||||
showSearch?: boolean;
|
||||
}
|
||||
|
||||
Object.assign(options.value, props.items);
|
||||
export interface SelectEmits {
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", value: string): void;
|
||||
(e: "search", value: string): void;
|
||||
}
|
||||
|
||||
watch(
|
||||
selectedValue,
|
||||
() => {
|
||||
if (multiple.value) {
|
||||
multipleValue.value = selectedValue.value.map((value: any) => {
|
||||
return options.value.find((item: any) => {
|
||||
item.disabled == "" || item.disabled == true
|
||||
? (item.closable = false)
|
||||
: (item.closable = true);
|
||||
return item.value === value;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
searchValue.value = "";
|
||||
singleValue.value = options.value.find((item: any) => {
|
||||
return item.value === selectedValue.value;
|
||||
})?.label;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
});
|
||||
|
||||
const getOption = function (nodes: VNode[]) {
|
||||
nodes?.map((item: VNode) => {
|
||||
let component = item.type as Component;
|
||||
if (component.name === LaySelectOption.name) {
|
||||
options.value.push(item.props);
|
||||
} else {
|
||||
getOption(item.children as VNode[]);
|
||||
}
|
||||
const props = withDefaults(defineProps<LaySelectProps>(), {
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
showEmpty: true,
|
||||
emptyMessage: "请选择",
|
||||
searchPlaceholder: "请搜索",
|
||||
collapseTagsTooltip: true,
|
||||
minCollapsedNum: 3,
|
||||
disabled: false,
|
||||
multiple: false,
|
||||
allowClear: false,
|
||||
showSearch: false,
|
||||
size: "md",
|
||||
});
|
||||
};
|
||||
|
||||
const selectedValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
},
|
||||
});
|
||||
const slots = useSlots();
|
||||
const searchValue = ref("");
|
||||
const singleValue = ref("");
|
||||
const multipleValue = ref([]);
|
||||
const emits = defineEmits<SelectEmits>();
|
||||
const openState: Ref<boolean> = ref(false);
|
||||
const options = ref<any>([]);
|
||||
var timer: any;
|
||||
|
||||
const multiple = computed(() => {
|
||||
return props.multiple;
|
||||
});
|
||||
const getOption = (nodes: VNode[]) => {
|
||||
nodes?.map((item: VNode) => {
|
||||
let component = item.type as Component;
|
||||
if (component.name === LaySelectOption.name) {
|
||||
options.value.push(item.props);
|
||||
} else {
|
||||
getOption(item.children as VNode[]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
emits("search", value);
|
||||
searchValue.value = value;
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
if (multiple.value) {
|
||||
selectedValue.value = [];
|
||||
} else {
|
||||
selectedValue.value = "";
|
||||
const intOption = () => {
|
||||
if (slots.default) {
|
||||
getOption(slots.default());
|
||||
}
|
||||
Object.assign(options.value, props.items);
|
||||
}
|
||||
};
|
||||
|
||||
provide("openState", openState);
|
||||
provide("selectedItem", selectedItem);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
</script>
|
||||
onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div class="layui-select layui-unselect">
|
||||
<lay-dropdown
|
||||
:disabled="disabled"
|
||||
:update-at-scroll="true"
|
||||
@show="openState = true"
|
||||
@hide="openState = false"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
:size="size"
|
||||
@clear="handleClear"
|
||||
intOption();
|
||||
timer = setInterval(intOption, 500);
|
||||
|
||||
watch(
|
||||
[selectedValue, options],
|
||||
() => {
|
||||
if (multiple.value) {
|
||||
multipleValue.value = selectedValue.value.map((value: any) => {
|
||||
return options.value.find((item: any) => {
|
||||
item.disabled == "" || item.disabled == true
|
||||
? (item.closable = false)
|
||||
: (item.closable = true);
|
||||
return item.value === value;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
searchValue.value = "";
|
||||
singleValue.value = options.value.find((item: any) => {
|
||||
return item.value === selectedValue.value;
|
||||
})?.label;
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
})
|
||||
|
||||
const selectedValue = computed({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(value) {
|
||||
emits("update:modelValue", value);
|
||||
emits("change", value);
|
||||
},
|
||||
});
|
||||
|
||||
const multiple = computed(() => {
|
||||
return props.multiple;
|
||||
});
|
||||
|
||||
const handleSearch = (value: string) => {
|
||||
emits("search", value);
|
||||
searchValue.value = value;
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
if (multiple.value) {
|
||||
selectedValue.value = [];
|
||||
} else {
|
||||
selectedValue.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
provide("openState", openState);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-select layui-unselect">
|
||||
<lay-dropdown
|
||||
:disabled="disabled"
|
||||
:update-at-scroll="true"
|
||||
@show="openState = true"
|
||||
@hide="openState = false"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
v-model="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:size="size"
|
||||
@Input="handleSearch"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
v-model="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<lay-select-option
|
||||
v-if="showEmpty && !multiple"
|
||||
:label="emptyMessage"
|
||||
value=""
|
||||
></lay-select-option>
|
||||
<template v-if="items">
|
||||
<lay-select-option
|
||||
v-for="(item, index) in items"
|
||||
v-bind="item"
|
||||
:key="index"
|
||||
></lay-select-option>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
:size="size"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
v-model="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:size="size"
|
||||
@Input="handleSearch"
|
||||
@clear="handleClear"
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
type="layui-icon-triangle-d"
|
||||
:class="{ triangle: openState }"
|
||||
></lay-icon>
|
||||
</template>
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
v-model="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<lay-select-option
|
||||
v-if="showEmpty && !multiple"
|
||||
:label="emptyMessage"
|
||||
value=""
|
||||
></lay-select-option>
|
||||
<template v-if="items">
|
||||
<lay-select-option
|
||||
v-for="(item, index) in items"
|
||||
v-bind="item"
|
||||
:key="index"
|
||||
></lay-select-option>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,7 +28,6 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
|
||||
label: "",
|
||||
});
|
||||
|
||||
const selectedItem: Ref<any> = inject("selectedItem") as Ref<any>;
|
||||
const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
|
||||
const selectedValue: WritableComputedRef<any> = inject(
|
||||
"selectedValue"
|
||||
@ -53,21 +52,14 @@ const selected = computed(() => {
|
||||
});
|
||||
|
||||
const select = () => {
|
||||
const info = {
|
||||
label: props.label,
|
||||
value: props.value,
|
||||
dispabled: props.disabled,
|
||||
keyword: props.keyword,
|
||||
};
|
||||
|
||||
if (multiple.value) {
|
||||
if (Array.isArray(selectedItem.value)) {
|
||||
if (notChecked.value) selectedItem.value.push(info);
|
||||
if (Array.isArray(selectedValue.value)) {
|
||||
if (notChecked.value) selectedValue.value.push(props.value);
|
||||
} else {
|
||||
selectedItem.value = [info];
|
||||
selectedValue.value = [props.value];
|
||||
}
|
||||
} else {
|
||||
selectedItem.value = info;
|
||||
selectedValue.value = props.value;
|
||||
}
|
||||
};
|
||||
|
||||
@ -80,8 +72,8 @@ const display = computed(() => {
|
||||
|
||||
const notChecked = computed(() => {
|
||||
return (
|
||||
selectedItem.value.find((item: any) => {
|
||||
return item.value === props.value;
|
||||
selectedValue.value.find((item: any) => {
|
||||
return item === props.value;
|
||||
}) === undefined
|
||||
);
|
||||
});
|
||||
|
||||
@ -183,7 +183,7 @@ export default {
|
||||
::: demo
|
||||
<template>
|
||||
<lay-select v-model="selected2" :multiple="true">
|
||||
<lay-select-option v-for="index of 200" :value="index" :label="index"></lay-select-option>
|
||||
<lay-select-option v-for="index of count2" :value="index" :label="index"></lay-select-option>
|
||||
</lay-select>
|
||||
</template>
|
||||
|
||||
@ -193,9 +193,15 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const count2 = ref(0)
|
||||
const selected2 = ref([1])
|
||||
|
||||
setTimeout(() => {
|
||||
count2.value = 100;
|
||||
}, 2000);
|
||||
|
||||
return {
|
||||
count2,
|
||||
selected2
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user