抽屉

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <v-navigation-drawer
+      v-model="value"
+      right absolute floating app
+      @change="drawerChange"
+    >
+      <v-list density="compact" nav>
+        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
+        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name:'personal-jobTypeCard'})
+const props = defineProps({
+  value: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: [String, Number],
+    default: 400
+  },
+  width: {
+    type: [String, Number],
+    default: 400
+  }
+})
+const value = props.value
+const emit = defineEmits(['update:modelValue'])
+const drawerChange = (val) => {
+  emit('update:modelValue', value)
+  console.log('val', val)
+  console.log('value', value)
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -1,34 +1,57 @@
 <template>
   <div class="search d-flex align-center">
-    <div class="jobBox d-flex pl-5">
-      <div>职位类型</div>
-      <span class="mdi mdi-chevron-down px-2" style="font-size: 18px;"></span>
+    <div style="position: relative;">
+      <div class="jobBox d-flex pl-5" :class="{'drawer': drawer}" @click="showJobTypeCard">
+        <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> -->
+      <!-- <div style="position: absolute; top: 42px; left: 250px; height: 300px; width: 250px;"> -->
+      <div>
+      </div>
     </div>
     <v-text-field
       v-model="value"
       placeholder="搜索职位/公司"
       color="#00897B"
       variant="plain"
-      density="comfortable"
+      density="compact"
       :hide-details="true"
       class="px-2"
       style="height: 100%; line-height: 100%;"
     ></v-text-field>
     <div class="searchBtn">搜索</div>
+    <v-navigation-drawer
+      v-model="drawer"
+      right absolute floating app
+    >
+      <v-list density="compact" nav>
+        <v-list-item prepend-icon="mdi-view-dashboard" title="Home" value="home"></v-list-item>
+        <v-list-item prepend-icon="mdi-forum" title="About" value="about"></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
   </div>
 </template>
 
 <script setup>
+// import jobTypeCard from './jobTypeCard.vue'
+
 import { ref } from 'vue';
 
 defineOptions({ name:'personal-search'})
 
 const value = ref('')
+let drawer = ref(false)
+
+const showJobTypeCard = () => {
+  drawer.value = !drawer.value
+  console.log('drawer.value', drawer.value)
+}
 </script>
 
 <style lang="scss" scoped>
 .search {
-  height: 60px;
+  height: 50px;
   width: 800px;
   margin: 16px auto 8px auto;
   border: 2px solid var(--v-primary-base);
@@ -39,11 +62,14 @@ const value = ref('')
       color: var(--v-primary-base);
     }
   }
+  .drawer {
+    color: var(--v-primary-base);
+  }
   .searchBtn {
     width: 100px;
-    height: 60px; line-height: 60px;
-    font-size: 18px;
+    height: 50px; line-height: 48px;
     text-align: center;
+    font-size: 18px;
     color: #fff;
     background-color: var(--v-primary-base);
   }