From 201ca4f20ce2dd1b2e4c5ec0a7f09f377e923195 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 15 八月 2025 16:32:28 +0800
Subject: [PATCH] Merge branch 'master' of http://120.26.58.240:8888/r/flexJobMiniApp
---
packages/components/src/Calendar/Calendar.vue | 42 ++++++++++++++++++++++++++++++++++++------
1 files changed, 36 insertions(+), 6 deletions(-)
diff --git a/packages/components/src/Calendar/Calendar.vue b/packages/components/src/Calendar/Calendar.vue
index 251bdbb..acb8468 100644
--- a/packages/components/src/Calendar/Calendar.vue
+++ b/packages/components/src/Calendar/Calendar.vue
@@ -1,16 +1,23 @@
<template>
<div class="bole-calendar-wrapper">
- <div class="bole-calendar-inner">
- <nut-calendar-card v-model="model" class="bole-calendar"></nut-calendar-card>
+ <div :class="['bole-calendar-inner', { isCollapse }]">
+ <nut-calendar-card
+ v-model="model"
+ class="bole-calendar"
+ ref="calendar"
+ @change="handleChange"
+ ></nut-calendar-card>
</div>
- <div class="bole-calendar-arrow">
- <DownArrow :size="12" />
+ <div :class="['bole-calendar-arrow', { active: !isCollapse }]" @click="toggle">
+ <DownArrow :size="12" :class="['bole-calendar-arrow-icon']" />
</div>
</div>
</template>
<script setup lang="ts">
import { DownArrow } from '@nutui/icons-vue-taro';
+import { useToggle } from 'senin-mini/hooks';
+import { ref, watch } from 'vue';
defineOptions({
name: 'Calendar',
@@ -20,6 +27,14 @@
// const props = withDefaults(defineProps<Props>(), {});
const model = defineModel<Date | Date[]>();
+
+const { isCollapse, toggle } = useToggle(true);
+
+const calendar = ref();
+function handleChange(value) {
+ console.log('value: ', value);
+ console.log('calendar: ', calendar.value);
+}
</script>
<style lang="scss">
@@ -31,13 +46,28 @@
}
.bole-calendar-inner {
- height: 500px;
- overflow: hidden;
+ overflow: auto;
+ transition: all 1s ease;
+ max-height: 2000px;
+
+ &.isCollapse {
+ max-height: 500px;
+ }
}
.bole-calendar-arrow {
display: flex;
justify-content: center;
+
+ .bole-calendar-arrow-icon {
+ transition: all 0.2s linear;
+ }
+
+ &.active {
+ .bole-calendar-arrow-icon {
+ transform: rotate(180deg);
+ }
+ }
}
}
</style>
--
Gitblit v1.9.1