✨(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,220 +1,231 @@
 <script lang="ts">
-export default {
+  export default {
-  name: "LaySelect",
+    name: "LaySelect",
-};
+  };
-</script>
+  </script>
-
+  
-<script setup lang="ts">
+  <script setup lang="ts">
-import "./index.less";
+  import "./index.less";
-import {
+  import {
-  provide,
+    provide,
-  computed,
+    computed,
-  ref,
+    ref,
-  Ref,
+    Ref,
-  useSlots,
+    useSlots,
-  onMounted,
+    onMounted,
-  VNode,
+    VNode,
-  Component,
+    Component,
-  watch,
+    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";
-  LaySelectOptionProps,
+  import LayDropdown from "../dropdown/index.vue";
-} from "../selectOption/index.vue";
+  import LaySelectOption, {
-
+    LaySelectOptionProps,
-export interface LaySelectProps {
+  } from "../selectOption/index.vue";
-  name?: string;
+  
-  disabled?: boolean;
+  export interface LaySelectProps {
-  placeholder?: string;
+    name?: string;
-  searchPlaceholder?: string;
+    disabled?: boolean;
-  showEmpty?: boolean;
+    placeholder?: string;
-  emptyMessage?: string;
+    searchPlaceholder?: string;
-  modelValue?: any;
+    showEmpty?: boolean;
-  multiple?: boolean;
+    emptyMessage?: string;
-  items?: LaySelectOptionProps[];
+    modelValue?: any;
-  size?: "lg" | "md" | "sm" | "xs";
+    multiple?: boolean;
-  collapseTagsTooltip?: boolean;
+    items?: LaySelectOptionProps[];
-  minCollapsedNum?: number;
+    size?: "lg" | "md" | "sm" | "xs";
-  allowClear?: boolean;
+    collapseTagsTooltip?: boolean;
-  showSearch?: 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());
   }
-
+  
-  Object.assign(options.value, props.items);
+  export interface SelectEmits {
-
+    (e: "update:modelValue", value: string): void;
-  watch(
+    (e: "change", value: string): void;
-    selectedValue,
+    (e: "search", value: string): void;
-    () => {
+  }
-      if (multiple.value) {
+  
-        multipleValue.value = selectedValue.value.map((value: any) => {
+  const props = withDefaults(defineProps<LaySelectProps>(), {
-          return options.value.find((item: any) => {
+    modelValue: null,
-            item.disabled == "" || item.disabled == true
+    placeholder: "请选择",
-              ? (item.closable = false)
+    showEmpty: true,
-              : (item.closable = true);
+    emptyMessage: "请选择",
-            return item.value === value;
+    searchPlaceholder: "请搜索",
-          });
+    collapseTagsTooltip: true,
-        });
+    minCollapsedNum: 3,
-      } else {
+    disabled: false,
-        searchValue.value = "";
+    multiple: false,
-        singleValue.value = options.value.find((item: any) => {
+    allowClear: false,
-          return item.value === selectedValue.value;
+    showSearch: false,
-        })?.label;
+    size: "md",
-      }
-    },
-    { 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 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 selectedValue = computed({
+  const getOption = (nodes: VNode[]) => {
-  get() {
+    nodes?.map((item: VNode) => {
-    return props.modelValue;
+      let component = item.type as Component;
-  },
+      if (component.name === LaySelectOption.name) {
-  set(value) {
+        options.value.push(item.props);
-    emits("update:modelValue", value);
+      } else {
-    emits("change", value);
+        getOption(item.children as VNode[]);
-  },
+      }
-});
+    });
+  };
 
-const multiple = computed(() => {
+  const intOption = () => {
-  return props.multiple;
+    if (slots.default) {
-});
+        getOption(slots.default());
-
+    }
-const handleSearch = (value: string) => {
+    Object.assign(options.value, props.items);
-  emits("search", value);
-  searchValue.value = value;
-};
-
-const handleClear = () => {
-  if (multiple.value) {
-    selectedValue.value = [];
-  } else {
-    selectedValue.value = "";
   }
-};
 
-provide("openState", openState);
+  onMounted(() => {
-provide("selectedItem", selectedItem);
+  
-provide("selectedValue", selectedValue);
+    intOption();
-provide("searchValue", searchValue);
+    timer = setInterval(intOption, 500);
-provide("multiple", multiple);
+  
-</script>
+    watch(
-
+      [selectedValue, options],
-<template>
+      () => {
-  <div class="layui-select layui-unselect">
+        if (multiple.value) {
-    <lay-dropdown
+          multipleValue.value = selectedValue.value.map((value: any) => {
-      :disabled="disabled"
+            return options.value.find((item: any) => {
-      :update-at-scroll="true"
+              item.disabled == "" || item.disabled == true
-      @show="openState = true"
+                ? (item.closable = false)
-      @hide="openState = false"
+                : (item.closable = true);
-    >
+              return item.value === value;
-      <lay-tag-input
+            });
-        v-if="multiple"
+          });
-        v-model="multipleValue"
+        } else {
-        :allow-clear="allowClear"
+          searchValue.value = "";
-        :placeholder="placeholder"
+          singleValue.value = options.value.find((item: any) => {
-        :collapseTagsTooltip="collapseTagsTooltip"
+            return item.value === selectedValue.value;
-        :minCollapsedNum="minCollapsedNum"
+          })?.label;
-        :disabledInput="true"
+        }
-        :size="size"
+      },
-        @clear="handleClear"
+      { 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-tag-input
-          <lay-icon
+          v-if="multiple"
-            type="layui-icon-triangle-d"
+          v-model="multipleValue"
-            :class="{ triangle: openState }"
+          :allow-clear="allowClear"
-          ></lay-icon>
+          :placeholder="placeholder"
-        </template>
+          :collapseTagsTooltip="collapseTagsTooltip"
-      </lay-tag-input>
+          :minCollapsedNum="minCollapsedNum"
-      <lay-input
+          :disabledInput="true"
-        v-else
+          :size="size"
-        v-model="singleValue"
+          @clear="handleClear"
-        :placeholder="placeholder"
+        >
-        :allow-clear="allowClear"
+          <template #suffix>
-        :readonly="!showSearch"
+            <lay-icon
-        :size="size"
+              type="layui-icon-triangle-d"
-        @Input="handleSearch"
+              :class="{ triangle: openState }"
-        @clear="handleClear"
+            ></lay-icon>
-      >
-        <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>
+        </lay-tag-input>
-        </dl>
+        <lay-input
-      </template>
+          v-else
-    </lay-dropdown>
+          v-model="singleValue"
-  </div>
+          :placeholder="placeholder"
-</template>
+          :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>
+  

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