点击其他地方关闭搜索框职位类型下拉

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="parent">
+  <div class="parent" @click="layoutClick">
     <Headers></Headers>
     <div>
       <router-view></router-view>
@@ -13,7 +13,14 @@
 import Headers from './personal/navBar.vue'
 import Footers from './personal/footer.vue'
 import Slider from './personal/slider.vue'
+import { useSharedState } from '@/store/sharedState'
 defineOptions({ name: 'layout-index' })
+
+const sharedState = useSharedState()
+
+const layoutClick = () => {
+  sharedState.increment()
+}
 </script>
 
 <style lang="scss" scoped>

src/store/sharedState.js

@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useSharedState = defineStore('sharedState', {
+  state: () => ({
+    layoutClickCount: 0
+  }),
+  actions: {
+    increment() {
+      this.layoutClickCount++
+    }
+    // setMessage(message) {
+    //   this.message = this.message + message
+    // }
+  }
+})

src/views/Home/personal/components/jobTypeCard.vue

@@ -372,6 +372,7 @@ const handleMouseLeave = () => { // 鼠标移出
   card2Data.show = false
   // card2Data.show = true
 }
+
 </script>
 
 <style lang="scss" scoped>

src/views/Home/personal/components/search.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="search d-flex align-center">
     <div style="position: relative;">
-      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="drawer = !drawer">
+      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click.stop="drawer = !drawer">
         <span>职位类型</span>
         <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
       </div>
-      <!-- <jobTypeCard v-if="drawer" style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"></jobTypeCard> -->
-      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search></jobTypeCard>
+      <jobTypeCard class="jobTypeCardBox" v-if="drawer" search @click.stop=""></jobTypeCard>
     </div>
     <v-text-field
       v-model="value"
@@ -23,15 +22,25 @@
 </template>
 
 <script setup>
+import { useSharedState } from '@/store/sharedState'
 import jobTypeCard from './jobTypeCard.vue'
 
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 defineOptions({ name:'personal-search'})
 
 const value = ref('')
 let drawer = ref(false)
 
+// 点击外部关闭职位下拉
+const sharedState = useSharedState()
+
+// 监听 layoutClickCount 变化
+watch(() => sharedState.layoutClickCount, () => {
+  // console.log('layoutClickCount', newValue)
+  if (drawer.value) drawer.value = false
+});
+
 </script>
 
 <style lang="scss" scoped>