条件搜索查询组件

src/components/checkGroup/checkBoxGroup.vue

@@ -2,60 +2,83 @@
     <div class="seach-box" :class="{ 'seach-history-h': show }">
         <div class="seach-info-box">
             <div class="select-module-box">
-                <div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
+                <div class="top-box" @click="checkList.list.splice(0, checkList.list.length)">
                     <img src="../../assets/homeImage/topTitleIcon.svg"
-                        v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
-                    <div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
-                    <span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
+                        v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
+                    <div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
+                    <span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限</span>
                 </div>
                 <div style="padding-top:10px;">
-                    <el-checkbox-group v-model="checkList.value">
-                        <el-checkbox label="复选框 A"></el-checkbox>
-                        <el-checkbox label="复选框 B"></el-checkbox>
-                        <el-checkbox label="复选框 C"></el-checkbox>
-                        <el-checkbox label="复选框 D"></el-checkbox>
-                        <el-checkbox label="复选框 E"></el-checkbox>
-                        <el-checkbox label="复选框 F"></el-checkbox>
-                        <el-checkbox label="复选框 G"></el-checkbox>
-                        <el-checkbox label="复选框 H"></el-checkbox>
-                        <el-checkbox label="复选框 I"></el-checkbox>
+                    <el-checkbox-group v-model="checkList.list">
+                        <el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
                     </el-checkbox-group>
                 </div>
             </div>
             <div class="seach-check-btn-box">
-                <div class="true-btn seach-btn" @click="selectSeach">选好了</div>
-                <div class="seach-btn" @click="closeSeach">取消</div>
+                <div class="true-btn seach-btn" @click="selectSeach(checkList.list)">选好了</div>
+                <div class="seach-btn" @click="closeBtn">取消</div>
             </div>
         </div>
     </div>
 </template>
     
 <script setup>
-import { reactive } from 'vue';
-//
-let checkList = reactive([])
-</script>
-<script>
-export default {
-    props: {
-        list: {
-            type: Array,
-            default: function () {
-                return []
-            }
-        },
-        show: {
-            type: Boolean,
-            default: false
-        },
-        closeSeach:{
-            type:Function,
-        },
-        selectSeach:{
-            type:Function
+import { reactive ,ref,watchEffect,watch} from 'vue';
+//props
+const props = defineProps({
+    list: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    },
+    show: {
+        type: Boolean,
+        default: false
+    },
+    closeSeach: {
+        type: Function,
+    },
+    selectSeach: {
+        type: Function
+    },
+    watchData: {
+        type: Function,
+        default:()=>{
+            return ()=>{}
         }
     }
+})
+let list =reactive([])
+let show =null
+let closeSeach = props.closeSeach
+let selectSeach = props.selectSeach
+let watchData= props.watchData
+
+//所选选项
+let checkList = reactive({list:[]})
+
+//监听刷新
+watchEffect(() => {
+    show = props.show
+    list.splice(0,list.length)
+    list.push(...props.list)
+    // console.log(show)
+    if(show){
+        checkList.list=[]
+    }
+})
+
+watch(()=>checkList.list,(nval,avl)=>{
+    watchData(nval)
+})
+
+//取消
+let closeBtn=()=>{
+    checkList.list.splice(0,checkList.list.length)
+    closeSeach()
 }
+
 </script>
 <style scoped>
 .seach-history-h {
@@ -64,9 +87,6 @@ export default {
 }
 
 .seach-box {
-    position: absolute;
-    top: 100px;
-    z-index: 666;
     width: 100%;
     max-height: 0;
     overflow: hidden;
@@ -80,9 +100,9 @@ export default {
         border-style: solid;
         border-color: rgba(235, 235, 235, 1);
         border-radius: 16px;
-        -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+        /* -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
         -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); */
 
         .seach-check-btn-box {
             width: 100%;
@@ -168,5 +188,16 @@ export default {
         }
     }
 }
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
+    font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
+    font-weight: 650;
+    font-style: normal;
+    font-size: 14px;
+    color: #000000;
+}
+/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
+    background:#50e3c2;
+    border-color:#50e3c2;
+}
 </style>