Browse Source

多选不关闭弹出list

lifanagju_citu 1 year ago
parent
commit
3b046ff8b0

+ 17 - 2
src/views/recruit/position/components/conditionFilter/JobType.vue

@@ -1,6 +1,15 @@
 <template>
-  <commonStyle btnTitle="求职类型">
-    <div></div>
+  <commonStyle btnTitle="求职类型" :close-on-content-click="false">
+    <v-list>
+      <v-list-item
+        color="primary"
+        :active="selectedItems.includes(item.value)"
+        v-for="item in items" :key="item.id" :value="item.value"
+        @click="handle(item.value)"
+      >
+        <v-list-item-title>{{ item.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </commonStyle>
 </template>
 <script setup>
@@ -10,10 +19,16 @@ import { ref } from 'vue';
 
 defineOptions({name: 'conditionFilter-JobType'})
 let items = ref()
+const selectedItems = ref([])
 getDict('menduner_job_type').then(({ data }) => { // 求职类型
   data = data?.length && data || []
   items.value = data
 })
+const handle = (val) => {
+  if (selectedItems.value.includes(val)) selectedItems.value.filter(i => i === val)
+  else selectedItems.value.push(val)
+  console.log('求职类型', val)
+}
 </script>
 <style lang="scss" scoped>
 </style>

+ 1 - 1
src/views/recruit/position/components/conditionFilter/commonStyle.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-menu open-on-hover>
+  <v-menu open-on-hover v-bind="$attrs">
     <template v-slot:activator="{ props }">
       <div class="d-flex align-center" v-bind="props">
         <div class="btn" @mouseover="drawer = true" @mouseleave="drawer = false">