我的布控。四色预警

src/components/MyComponents/CheckBox/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="form-item-box" :style="{ width: width }">
+    <el-checkbox-group v-model="modelValue" @change="handleCheckAllChange">
+      <el-checkbox
+        v-for="item in checkList"
+        :key="item.value"
+        :label="item.value"
+        >{{ item.label }}</el-checkbox
+      >
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script setup>
+import { COMPONENT_WIDTH } from "@/constant";
+import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
+const props = defineProps({
+  //获取组件传值
+  placeholder: {
+    default: "请填写手机号",
+    type: String
+  },
+  modelValue: {
+    default: [],
+    type: Array
+  },
+  width: {
+    default: COMPONENT_WIDTH,
+    type: String
+  },
+  // 绑定的prop
+  checkList: {
+    default: "",
+    type: String
+  }
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    console.log(val, "val");
+  },
+  { deep: true }
+);
+const emits = defineEmits(["update:modelValue"]);
+const handleCheckAllChange = (e) => {
+  emits("update:modelValue", e);
+};
+</script>