✨ [新增]下拉框支持多选；初版本提交

src/module/selectOption/index.vue

@@ -2,47 +2,59 @@
   <dd
     :value="value"
     :class="[
-      selectItem.value === value ? 'layui-this' : '',
-      disabled ? 'layui-disabled' : '',
+      {'layui-this' : selected},
+      {'layui-disabled' : disabled}
     ]"
     @click="selectHandle"
   >
-    {{ label }}
+    <template v-if="selectItem.multiple">
+      <lay-checkbox skin="primary" v-model="selected" @change="selectHandle" label=""></lay-checkbox>
+    </template>
+    <slot>{{ label }}</slot>
   </dd>
 </template>
 
-<script setup name="LaySelectOption" lang="ts">
-import { SelectItem } from '../type'
-import { defineProps, inject, onMounted, Ref } from 'vue'
+<script lang="ts">
+export default {
+  name : 'LaySelectOption'
+}
+</script>
+
+<script setup lang="ts">
+import LayCheckbox from '../checkbox';
+import { SelectItem, SelectItemHandle } from '../type'
+import { computed, defineProps, inject, onMounted, Ref} from 'vue'
 
 const props = withDefaults(
   defineProps<{
-    value: string
-    label: string
-    disabled?: boolean | string
+    value: string | null | undefined
+    label?: string
+    disabled?: boolean
   }>(),
   {
     disabled: false,
   }
 )
 
-const selectItem = inject('selectItem') as SelectItem
-const openState = inject('openState') as Ref<boolean>
+const selectItemHandle = inject('selectItemHandle') as SelectItemHandle
+const selectItem = inject('selectItem') as Ref<SelectItem>
 
 const selectHandle = function () {
-  if (props.disabled) {
-    return
-  }
-  openState.value = false
-  selectItem.value = props.value
-  selectItem.label = props.label
+  !props.disabled && callSelectItemHandle(!selected.value);
 }
-
-// init selected
-onMounted(() => {
-  if (selectItem.value === props.value) {
-    selectItem.value = props.value
-    selectItem.label = props.label
+const callSelectItemHandle = function(isChecked ?: boolean){
+  selectItemHandle({
+    value : props.value,
+    label : props.label,
+    disabled : props.disabled
+  }, isChecked);
+}
+const selected = computed(()=>{
+  const selectValues = selectItem.value.value;
+  if (Array.isArray(selectValues)) {
+    return (selectValues as any[]).indexOf(props.value) > -1;
   }
+  return selectItem.value.value === props.value
 })
+onMounted(() => selected.value && callSelectItemHandle())
 </script>