| | |
| | | <template> |
| | | <div class="bole-calendar-wrapper"> |
| | | <div :class="['bole-calendar-inner', { isCollapse }]"> |
| | | <scroll-view :enhanced="true" :scroll-y="true" :class="['bole-calendar-inner', { isCollapse }]"> |
| | | <nut-calendar-card v-model="model" class="bole-calendar"></nut-calendar-card> |
| | | </div> |
| | | </scroll-view> |
| | | <div :class="['bole-calendar-arrow', { active: !isCollapse }]" @click="toggle"> |
| | | <DownArrow :size="12" :class="['bole-calendar-arrow-icon']" /> |
| | | </div> |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import { DownArrow } from '@nutui/icons-vue-taro'; |
| | | import Taro from '@tarojs/taro'; |
| | | import { useToggle } from 'senin-mini/hooks'; |
| | | import { onMounted, ref, watch } from 'vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'Calendar', |
| | |
| | | const model = defineModel<Date | Date[]>(); |
| | | |
| | | const { isCollapse, toggle } = useToggle(true); |
| | | |
| | | onMounted(() => { |
| | | const query = Taro.createSelectorQuery(); |
| | | query.select('.nut-calendarcard-day.current.active').boundingClientRect(); |
| | | query.select('.bole-calendar-inner').boundingClientRect(); |
| | | query.select('.bole-calendar-inner').node(); |
| | | query.exec(function (res) { |
| | | const calendarWindowHeight = res[1].height + res[1].top; |
| | | const currentDayWindowHeight = res[0].height + res[0].top; |
| | | if (currentDayWindowHeight > calendarWindowHeight) { |
| | | const scrollView = res[2].node; |
| | | scrollView?.scrollIntoView?.('.nut-calendarcard-day.current.active'); |
| | | } |
| | | }); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss"> |