✨(component): update select

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

@@ -15,6 +15,7 @@ import {
   onMounted,
   VNode,
   Component,
+  watch
 } from "vue";
 import LayInput from "../input/index.vue";
 import LayTagInput from "../tagInput/index.vue";
@@ -53,6 +54,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
 const slots = useSlots();
 const emits = defineEmits<SelectEmits>();
 const searchValue = ref("");
+const singleLabel = ref("");
 const openState: Ref<boolean> = ref(false);
 const selectedItem: Ref<any> = ref([]);
 const options = ref<any>([]);
@@ -62,6 +64,17 @@ onMounted(() => {
     getOption(slots.default());
   }
   Object.assign(options.value, props.items);
+
+  watch(selectedValue, () => {
+    if (multiple.value) {
+      // tag-input 格式化
+
+    } else {
+      singleLabel.value = options.value.find((item: any) => {
+        return item.value === selectedValue.value;
+      })?.label;
+    }
+  }, { immediate: true })
 });
 
 const getOption = function (nodes: VNode[]) {
@@ -98,29 +111,13 @@ provide("multiple", multiple);
 
 <template>
   <div class="layui-select">
-    <lay-dropdown
+    <lay-dropdown :disabled="disabled" :update-at-scroll="true" @show="openState = true" @hide="openState = false">
-      :disabled="disabled"
+      <lay-tag-input v-if="multiple" v-model="selectedValue" :allow-clear="allowClear" :disabledInput="true">
-      :update-at-scroll="true"
-      @show="openState = true"
-      @hide="openState = false"
-    >
-      <lay-tag-input
-        v-if="multiple"
-        v-model="selectedValue"
-        :allow-clear="allowClear"
-        :disabledInput="true"
-      >
         <template #suffix>
           <lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon>
         </template>
       </lay-tag-input>
-      <lay-input
+      <lay-input v-else v-model="singleLabel" :placeholder="placeholder" :allow-clear="allowClear" :readonly="true">
-        v-else
-        v-model="searchValue"
-        :placeholder="placeholder"
-        :allow-clear="allowClear"
-        :readonly="true"
-      >
         <template #suffix>
           <lay-icon type="layui-icon-triangle-d" :class="{ 'triangle': openState }"></lay-icon>
         </template>
@@ -128,19 +125,10 @@ provide("multiple", multiple);
       <template #content>
         <dl class="layui-select-options">
           <div class="layui-select-search" v-if="multiple">
-            <lay-input
+            <lay-input v-model="searchValue" prefix-icon="layui-icon-search" placeholder="请搜索" size="sm"></lay-input>
-              v-model="searchValue"
-              prefix-icon="layui-icon-search"
-              placeholder="请搜索"
-              size="sm"
-            ></lay-input>
           </div>
           <template v-if="items">
-            <lay-select-option
+            <lay-select-option v-for="(item, index) in items" v-bind="item" :key="index"></lay-select-option>
-              v-for="(item, index) in items"
-              v-bind="item"
-              :key="index"
-            ></lay-select-option>
           </template>
           <slot></slot>
         </dl>

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

@@ -31,7 +31,9 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
 
 const selectedItem: Ref<any> = inject("selectedItem") as Ref<any>;
 const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
-const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
+const selectedValue: WritableComputedRef<any> = inject(
+  "selectedValue"
+) as WritableComputedRef<any>;
 const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
 

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

@@ -45,9 +45,9 @@ export default {
   <br/>
   <br/>
   <lay-select v-model="value2">
-    <lay-select-option value="1" label="学习"></lay-select-option>
+    <lay-select-option :value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码"></lay-select-option>
+    <lay-select-option :value="2" label="编码"></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
+    <lay-select-option :value="3" label="运动"></lay-select-option>
   </lay-select>
 </template>