条件搜索查询组件

src/components/indexSeachInfo/indexSeachInfo.vue

@@ -8,22 +8,24 @@
             <div class="info-box-bg">
                 <div class="box"
                     :class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
-                    <div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
-                        v-if="seachType === '1'">
-                        {{ item.text }}</div>
-
-                    <div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
-                        v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
-
-                    <div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
-                        :class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
-                        v-for="(item, i) in btn" :key="i">
+                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
+                        { 'btn': seachType === '1' },
+                        { 'mg-l-15': seachType === '1' && i % 4 !== 0 },
+                        { 'seach-long-btn btn': seachType === '2' },
+                        { 'mg-l-15': seachType === '2' && i % 3 !== 0 },
+                        { 'select-btn': seachType === '3' },
+                        { 'mg-l-15': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
+                    ]">
                         {{ item.text }}
-                        <img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
+                        <img v-if="seachType === '3'"
+                            :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
                             class="img" alt="">
                     </div>
                 </div>
-                <checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
+                <div v-if="seachType === '3'" class="hid-box">
+                    <checkBoxGroup :show="selectType !== ''" :selectSeach="selectSeach" :closeSeach="closeSeach" :list="selectData.data">
+                    </checkBoxGroup>
+                </div>
             </div>
         </div>
     </div>
@@ -33,13 +35,39 @@
 import { reactive, ref } from 'vue';
 import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
 
-let selectType = ref('')
+const props = defineProps({
+    seachType: {
+        type: String,
+        default: null
+    },
+    title: {
+        type: String,
+        default: '123'
+    },
+    btn: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    }
+})
+
+let seachType = props.seachType
+let title = props.title
+let btn = JSON.parse(JSON.stringify(props.btn))
 //
-let setSelectType = (num) => {
-    if (num === selectType.value) {
-        selectType.value = ''
-    } else {
-        selectType.value = num
+
+let selectType = ref('')
+let selectData = reactive({data:[]})
+//点击选项
+let setSelectType = (num,data) => {
+    if (seachType == 3) {
+        if (num === selectType.value) {
+            selectType.value = ''
+        } else {
+            selectType.value = num
+            selectData.data=data
+        }
     }
 }
 //取消按钮
@@ -48,30 +76,10 @@ let closeSeach = () => {
 }
 
 //确认按钮
-let selectSeach=()=>{
-
+let selectSeach = (data) => {
+    console.log(data)
 }
 
-</script>
-<script>
-export default {
-    props: {
-        title: {
-            type: String,
-            default: '123'
-        },
-        btn: {
-            type: Array,
-            default: function () {
-                return []
-            }
-        },
-        seachType: {
-            type: String,
-            default: null
-        }
-    }
-}
 </script>
 <style scoped>
 .pad-15 {
@@ -121,6 +129,13 @@ export default {
     width: 550px;
     position: relative;
 
+    .hid-box {
+        position: absolute;
+        top: 100px;
+        width: 100%;
+        z-index: 666;
+    }
+
     .box {
         display: flex;
         flex-wrap: wrap;
@@ -160,7 +175,7 @@ export default {
         justify-content: center;
         align-items: center;
         margin: 27px 0;
-        cursor: pointer ;
+        cursor: pointer;
 
         .img {
             width: 14px;
@@ -173,7 +188,7 @@ export default {
     .seach-long-btn {
         width: 161px !important;
         height: 32px !important;
-        cursor: pointer ;
+        cursor: pointer;
     }
 
     .btn {
@@ -197,7 +212,7 @@ export default {
         line-height: 32px;
         text-align: center;
         margin-top: 10px;
-        cursor: pointer ;
+        cursor: pointer;
     }
 
     .mg-l-15 {