✨(component): 实现 select 组件单选多选禁用

package/component/src/component/select/index.less

@@ -13,8 +13,10 @@
   }
 }
 
-.layui-select-options {
-  padding: 5px 0;
+.layui-select-content {
+  max-height: 300px;
+  padding: 5px 0px;
+  overflow: auto;
 }
 
 .layui-select .layui-icon-triangle-d {
@@ -27,7 +29,7 @@
   transform: rotate(180deg);
 }
 
-.layui-select-options .layui-select-option {
+.layui-select-content .layui-select-option {
   padding: 0 10px;
   line-height: 36px;
   white-space: nowrap;
@@ -35,11 +37,16 @@
   text-overflow: ellipsis;
 }
 
-.layui-select-options .layui-select-option .layui-form-checkbox[lay-skin="primary"] {
+.layui-select-content .layui-select-option.layui-disabled {
+  color: var(--global-neutral-color-6)!important;
+  cursor: not-allowed!important;  
+}
+
+.layui-select-content .layui-select-option .layui-form-checkbox[lay-skin="primary"] {
   padding-left: 12px;
 }
 
-.layui-select-options .layui-select-option.layui-this {
+.layui-select-content .layui-select-option.layui-this {
   background-color: var(--global-neutral-color-2);
   color: var(--global-checked-color);
   font-size: 700;

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

@@ -56,7 +56,7 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   multiple: false,
   size: "md",
   allowClear: false,
-  showSearch: false
+  showSearch: false,
 });
 
 const slots = useSlots();
@@ -100,7 +100,7 @@ onMounted(() => {
 
 const handleSearch = (value: string) => {
   searchValue.value = value;
-}
+};
 
 const getOption = function (nodes: VNode[]) {
   nodes?.map((item: VNode) => {
@@ -174,7 +174,7 @@ provide("multiple", multiple);
         </template>
       </lay-input>
       <template #content>
-        <dl class="layui-select-options">
+        <dl class="layui-select-content">
           <div class="layui-select-search" v-if="multiple && showSearch">
             <lay-input
               v-model="searchValue"

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

@@ -37,7 +37,7 @@ const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
 
 const handleSelect = () => {
-  if (!multiple.value) {
+  if (!multiple.value && !props.disabled) {
     openState.value = false;
     selectedValue.value = props.value;
     select();
@@ -54,22 +54,22 @@ const selected = computed(() => {
 
 const select = () => {
 
-    const info = {
-      label: props.label,
-      value: props.value,
-      dispabled: props.disabled,
-      keyword: props.keyword,
-    };
+  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);
-      } else {
-        selectedItem.value = [info];
-      }
+  if (multiple.value) {
+    if (Array.isArray(selectedItem.value)) {
+      if (notChecked.value) selectedItem.value.push(info);
     } else {
-      selectedItem.value = info;
+      selectedItem.value = [info];
     }
+  } else {
+    selectedItem.value = info;
+  }
 };
 
 const display = computed(() => {
@@ -95,12 +95,13 @@ onMounted(() => {
 <template>
   <dd
     v-show="display"
-    :class="['layui-select-option', { 'layui-this': selected && !multiple }]"
+    :class="['layui-select-option', { 'layui-this': selected && !multiple, 'layui-disabled': disabled}]"
     @click="handleSelect"
   >
     <template v-if="multiple">
       <lay-checkbox
         v-model="selectedValue"
+        :disabled="disabled"
         :value="value"
         skin="primary"
       ></lay-checkbox>