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

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

@@ -13,8 +13,10 @@
   }
 }
 
-.layui-select-options {
+.layui-select-content {
-  padding: 5px 0;
+  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 = {
+  const info = {
-      label: props.label,
+    label: props.label,
-      value: props.value,
+    value: props.value,
-      dispabled: props.disabled,
+    dispabled: props.disabled,
-      keyword: props.keyword,
+    keyword: props.keyword,
-    };
+  };
 
-    if (multiple.value) {
+  if (multiple.value) {
-      if (Array.isArray(selectedItem.value)) {
+    if (Array.isArray(selectedItem.value)) {
-        if (notChecked.value) selectedItem.value.push(info);
+      if (notChecked.value) selectedItem.value.push(info);
-      } else {
-        selectedItem.value = [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>

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

@@ -99,7 +99,6 @@ npm install @layui/icons-vue
 
 ```vue
 <template>
-  <!-- 组件图标 -->
   <AlignCenterIcon></AlignCenterIcon>
   <DiamondIcon></DiamondIcon>
 </template>

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

@@ -109,7 +109,6 @@ export default {
 
 :::
 
-
 ::: title 传入选项
 :::
 
@@ -139,123 +138,6 @@ export default {
 </script>
 :::
 
-::: title 检索回调
-:::
-
-::: demo
-<template>
-  <lay-select @search="search" v-model="selected">
-    <lay-select-option value="1" label="学习"></lay-select-option>
-    <lay-select-option value="2" label="编码" disabled></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const selected = ref('1');
-    function search(txt){
-      console.log('关键词:',txt)
-    }
-    return {
-      selected,search
-    }
-  }
-}
-</script>
-:::
-
-::: title 定义标识
-:::
-
-::: demo
-<template>
-  <lay-select v-model="selected">
-    <lay-select-option value="1" label="学习" keyword="学习xuexi"></lay-select-option>
-    <lay-select-option value="2" label="编码" disabled></lay-select-option>
-    <lay-select-option value="3" label="运动"></lay-select-option>
-  </lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const selected = ref('1');
-    return {
-      selected
-    }
-  }
-}
-</script>
-:::
-
-::: title 传入选项
-:::
-
-::: demo
-<template>
-  <lay-select v-model="selected" :items="items">
-  </lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const selected = ref('1');
-    const items=ref([
-      {label:'选项1',value:1,keyword:'选项xuanxiang1'},
-      {label:'选项2',value:2,keyword:'选项xuanxiang2'},
-      {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
-    ])
-    return {
-      items,
-      selected,
-    }
-  }
-}
-</script>
-:::
-
-::: title 创建回调
-:::
-
-::: demo
-<template>
-  <lay-select v-model="selected" :items="items" :create="true"  @create="createEvent"></lay-select>
-</template>
-
-<script>
-import { ref } from 'vue'
-
-export default {
-  setup() {
-    const selected = ref('1');
-    const items=ref([
-      {label:'选项1',value:'1',keyword:'选项xuanxiang1'},
-      {label:'选项2',value:2,keyword:'选项xuanxiang2'},
-      {label:'选项3',value:3,keyword:'选项xuanxiang3',disabled:true},
-    ]);
-    function createEvent(v){
-      items.value.push({
-        label:v,
-        value:items.value.length
-      })
-    }
-    return {
-      selected,items,createEvent
-    }
-  }
-}
-</script>
-:::
-
 ::: title 海量数据 
 :::