✨(component): 修复 select 无法异步加载的问题

package/component/package.json

@@ -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",

package/component/src/component/select/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
-export default {
+  export default {
     name: "LaySelect",
-};
+  };
-</script>
+  </script>
   
-<script setup lang="ts">
+  <script setup lang="ts">
-import "./index.less";
+  import "./index.less";
-import {
+  import {
     provide,
     computed,
     ref,
@@ -16,16 +16,18 @@ import {
     VNode,
     Component,
     watch,
-} from "vue";
+    nextTick,
-import { LayIcon } from "@layui/icons-vue";
+    onUnmounted
-import LayInput from "../input/index.vue";
+  } from "vue";
-import LayTagInput from "../tagInput/index.vue";
+  import { LayIcon } from "@layui/icons-vue";
-import LayDropdown from "../dropdown/index.vue";
+  import LayInput from "../input/index.vue";
-import LaySelectOption, {
+  import LayTagInput from "../tagInput/index.vue";
+  import LayDropdown from "../dropdown/index.vue";
+  import LaySelectOption, {
     LaySelectOptionProps,
-} from "../selectOption/index.vue";
+  } from "../selectOption/index.vue";
   
-export interface LaySelectProps {
+  export interface LaySelectProps {
     name?: string;
     disabled?: boolean;
     placeholder?: string;
@@ -40,15 +42,15 @@ export interface LaySelectProps {
     minCollapsedNum?: number;
     allowClear?: boolean;
     showSearch?: boolean;
-}
+  }
   
-export interface SelectEmits {
+  export interface SelectEmits {
     (e: "update:modelValue", value: string): void;
     (e: "change", value: string): void;
     (e: "search", value: string): void;
-}
+  }
   
-const props = withDefaults(defineProps<LaySelectProps>(), {
+  const props = withDefaults(defineProps<LaySelectProps>(), {
     modelValue: null,
     placeholder: "请选择",
     showEmpty: true,
@@ -61,26 +63,42 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
     allowClear: false,
     showSearch: false,
     size: "md",
-});
+  });
   
-const slots = useSlots();
+  const slots = useSlots();
-const searchValue = ref("");
+  const searchValue = ref("");
-const singleValue = ref("");
+  const singleValue = ref("");
-const multipleValue = ref([]);
+  const multipleValue = ref([]);
-const emits = defineEmits<SelectEmits>();
+  const emits = defineEmits<SelectEmits>();
-const openState: Ref<boolean> = ref(false);
+  const openState: Ref<boolean> = ref(false);
-const selectedItem: Ref<any> = ref([]);
+  const options = ref<any>([]);
-const options = ref<any>([]);
+  var timer: any;
 
-onMounted(() => {
+  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 intOption = () => {
     if (slots.default) {
         getOption(slots.default());
     }
-
     Object.assign(options.value, props.items);
+  }
+
+  onMounted(() => {
+  
+    intOption();
+    timer = setInterval(intOption, 500);
   
     watch(
-    selectedValue,
+      [selectedValue, options],
       () => {
         if (multiple.value) {
           multipleValue.value = selectedValue.value.map((value: any) => {
@@ -98,22 +116,15 @@ onMounted(() => {
           })?.label;
         }
       },
-    { immediate: true }
+      { immediate: true, deep: 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 selectedValue = computed({
+  onUnmounted(() => {
+    clearInterval(timer);
+  })
+  
+  const selectedValue = computed({
     get() {
       return props.modelValue;
     },
@@ -121,33 +132,32 @@ const selectedValue = computed({
       emits("update:modelValue", value);
       emits("change", value);
     },
-});
+  });
   
-const multiple = computed(() => {
+  const multiple = computed(() => {
     return props.multiple;
-});
+  });
   
-const handleSearch = (value: string) => {
+  const handleSearch = (value: string) => {
     emits("search", value);
     searchValue.value = value;
-};
+  };
   
-const handleClear = () => {
+  const handleClear = () => {
     if (multiple.value) {
       selectedValue.value = [];
     } else {
       selectedValue.value = "";
     }
-};
+  };
   
-provide("openState", openState);
+  provide("openState", openState);
-provide("selectedItem", selectedItem);
+  provide("selectedValue", selectedValue);
-provide("selectedValue", selectedValue);
+  provide("searchValue", searchValue);
-provide("searchValue", searchValue);
+  provide("multiple", multiple);
-provide("multiple", multiple);
+  </script>
-</script>
   
-<template>
+  <template>
     <div class="layui-select layui-unselect">
       <lay-dropdown
         :disabled="disabled"
@@ -217,4 +227,5 @@ provide("multiple", multiple);
         </template>
       </lay-dropdown>
     </div>
-</template>
+  </template>
+  

package/component/src/component/selectOption/index.vue

@@ -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 (Array.isArray(selectedValue.value)) {
-      if (notChecked.value) selectedItem.value.push(info);
+      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) => {
+    selectedValue.value.find((item: any) => {
-      return item.value === props.value;
+      return item === props.value;
     }) === undefined
   );
 });

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

@@ -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
     }
   }