fix: bug

wupengfei

3 天以前 83a43c957729ffdec7ca8eb4f8ebd62a1c6b4abc

 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>