✨(component): 优化 select-option 代码逻辑

package/component/src/component/checkbox/index.vue

@@ -13,12 +13,12 @@ import { CheckboxSize } from "./interface";
 export interface CheckboxProps {
   name?: string;
   skin?: string;
-  value: string | number | object;
   label?: string;
-  isIndeterminate?: boolean;
+  value: string | number | object;
   modelValue?: boolean | Array<string | number | object>;
-  disabled?: boolean;
+  isIndeterminate?: boolean;
   size?: CheckboxSize;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<CheckboxProps>(), {
@@ -113,6 +113,8 @@ const isDisabled = computed(() => {
   }
   return false;
 });
+
+defineExpose({ toggle: handleClick });
 </script>
 
 <template>

package/component/src/component/dropdown/index.vue

@@ -20,7 +20,7 @@ import {
   cloneVNode,
   useAttrs,
   StyleValue,
-PropType,
+  PropType,
 } from "vue";
 import {
   computed,

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

@@ -12,7 +12,7 @@ import {
   inject,
   WritableComputedRef,
   Ref,
-  onMounted,
+  ref
 } from "vue";
 
 export interface SelectOptionProps {
@@ -30,17 +30,22 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
 
 const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
-const selectedValue: WritableComputedRef<any> = inject(
-  "selectedValue"
-) as WritableComputedRef<any>;
+const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
+const checkboxRef = ref<HTMLElement>();
 
 const handleSelect = () => {
-  if (!multiple.value && !props.disabled) {
-    // @ts-ignore
-    selectRef.value.hide();
-    selectedValue.value = props.value;
-    select();
+  if(multiple.value) {
+    if(!props.disabled) {
+      // @ts-ignore
+      checkboxRef.value?.toggle();
+    }
+  } else {
+    if(!props.disabled) {
+      // @ts-ignore
+      selectRef.value.hide();
+      selectedValue.value = props.value;
+    }
   }
 };
 
@@ -52,18 +57,6 @@ const selected = computed(() => {
   }
 });
 
-const select = () => {
-  if (multiple.value) {
-    if (Array.isArray(selectedValue.value)) {
-      if (notChecked.value) selectedValue.value.push(props.value);
-    } else {
-      selectedValue.value = [props.value];
-    }
-  } else {
-    selectedValue.value = props.value;
-  }
-};
-
 const display = computed(() => {
   return (
     props.keyword?.toString().indexOf(searchValue.value) > -1 ||
@@ -71,34 +64,30 @@ const display = computed(() => {
   );
 });
 
-const notChecked = computed(() => {
-  return (
-    selectedValue.value.find((item: any) => {
-      return item === props.value;
-    }) === undefined
-  );
-});
-
-onMounted(() => {
-  selected.value && select();
-});
+const classes = computed(() => {
+  return [
+    'layui-select-option',
+    {
+      "layui-this": selected.value,
+      "layui-disabled": props.disabled,
+    }
+  ]
+})
 </script>
 
 <template>
   <dd
     v-show="display"
-    :class="[
-      'layui-select-option',
-      { 'layui-this': selected, 'layui-disabled': disabled },
-    ]"
+    :class="classes"
     @click="handleSelect"
   >
     <template v-if="multiple">
       <lay-checkbox
+        skin="primary"
+        ref="checkboxRef" 
         v-model="selectedValue"
         :disabled="disabled"
         :value="value"
-        skin="primary"
       ></lay-checkbox>
     </template>
     <slot>{{ label }}</slot>