复选框封装

src/components/CtForm/index.vue

@@ -44,6 +44,12 @@
                 :item="item"
                 @change="handleChange(item)"
               ></radioGroupUI>
+              <checkboxUI
+                v-if="item.type === 'checkbox'"
+                v-model="item.value"
+                :item="item"
+                @change="handleChange(item)"
+              ></checkboxUI>
               <textareaUI
                 v-if="item.type === 'textarea'"
                 v-model="item.value"
@@ -70,6 +76,7 @@ import autocompleteUI from './../FormUI/autocomplete'
 import comboboxUI from './../FormUI/combobox'
 import comboboxZhAndEnUI from './../FormUI/comboboxZhAndEn'
 import radioGroupUI from './../FormUI/radioGroup'
+import checkboxUI from './../FormUI/checkbox'
 import textareaUI from './../FormUI/textArea'
 import DatePicker from '@/components/DatePicker'
 import { ref, defineEmits } from 'vue'

src/components/FormUI/checkbox/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-checkbox
+    v-model="value"
+    v-for="k in item.items"
+    :key="k.key"
+    :label="k.label"
+    :value="k.value"
+    :disabled="k.disabled"
+    :color="item.color || 'primary'"
+    :density="k.density || 'compact'"
+    :multiple="k.multiple === false ? false : true"
+    class="mr-3"
+    hide-details
+    @update:modelValue="modelValueUpDate"
+  ></v-checkbox>
+</template>
+<script setup>
+import { ref, defineEmits } from 'vue';
+defineOptions({ name:'FormUI-v-checkbox'})
+
+const props = defineProps({item: Object, modelValue: [String, Number, Boolean]})
+const emit = defineEmits(['update:modelValue', 'change'])
+const item = props.item
+const value = ref(props.modelValue)
+const modelValueUpDate = (val) => {
+  value.value = val
+  emit('update:modelValue', value.value)
+  emit('change', value.value)
+}
+</script>
+<style lang="scss" scoped>
+// :deep(.v-input__control) {
+//   flex-direction: row !important;
+// }
+// :deep(.v-selection-control-group) {
+//   margin-top: 0 !important;
+// }
+// :deep(.v-label) {
+//   margin-left: 0 !important;
+// }
+</style>

src/components/FormUI/radioGroup/index.vue

@@ -1,5 +1,4 @@
 <template>
-  
   <!-- <div :style="`width: ${item.width || 120}px;`">{{ item.label }}</div> -->
   <v-radio-group
     v-model="value"