|
|
@@ -1,20 +1,28 @@
|
|
|
<template>
|
|
|
<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">
|
|
|
+ <template v-slot:activator="{ isActive, props }">
|
|
|
+ <v-btn
|
|
|
+ class="mr-3"
|
|
|
+ density="comfortable"
|
|
|
+ :append-icon="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"
|
|
|
+ color="primary" variant="tonal"
|
|
|
+ v-bind="props"
|
|
|
+ >
|
|
|
+ {{ defineProps.btnTitle }}
|
|
|
+ </v-btn>
|
|
|
+ <!-- <div class="d-flex align-center">
|
|
|
+ <div class="btn" v-bind="props">
|
|
|
<span class="mr-2">{{ defineProps.btnTitle }}</span>
|
|
|
- <span v-if="drawer" class="mdi mdi-menu-up"></span>
|
|
|
- <span v-if="!drawer" class="mdi mdi-menu-down"></span>
|
|
|
+ <span v-if="isActive" class="mdi mdi-menu-up"></span>
|
|
|
+ <span v-if="!isActive" class="mdi mdi-menu-down"></span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</template>
|
|
|
<!-- <jobTypeCard @click.stop=""></jobTypeCard> -->
|
|
|
<slot></slot>
|
|
|
</v-menu>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
|
|
|
defineOptions({name: 'conditionFilter-index-page'})
|
|
|
const defineProps = defineProps({
|
|
|
@@ -23,20 +31,19 @@ const defineProps = defineProps({
|
|
|
default: 'Text'
|
|
|
}
|
|
|
})
|
|
|
-const drawer = ref(false)
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.btn {
|
|
|
- color: #333333;
|
|
|
- background-color: var(--default-bgc);
|
|
|
- padding: 4px 12px 4px 12px;
|
|
|
- border-radius: 4px;
|
|
|
- margin-right: 20px;
|
|
|
- margin-bottom: 4px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- color: var(--v-primary-base);
|
|
|
- background-color: #d5e6e8;
|
|
|
- }
|
|
|
-}
|
|
|
+// .btn {
|
|
|
+// color: #333333;
|
|
|
+// background-color: var(--default-bgc);
|
|
|
+// padding: 4px 12px 4px 12px;
|
|
|
+// border-radius: 4px;
|
|
|
+// margin-right: 20px;
|
|
|
+// margin-bottom: 4px;
|
|
|
+// cursor: pointer;
|
|
|
+// &:hover {
|
|
|
+// color: var(--v-primary-base);
|
|
|
+// background-color: #d5e6e8;
|
|
|
+// }
|
|
|
+// }
|
|
|
</style>
|
