|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="bole-calendar-wrapper"> | 
|---|
|  |  |  | <div :class="['bole-calendar-inner', { isCollapse }]"> | 
|---|
|  |  |  | <nut-calendar-card | 
|---|
|  |  |  | v-model="model" | 
|---|
|  |  |  | class="bole-calendar" | 
|---|
|  |  |  | ></nut-calendar-card> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <scroll-view :enhanced="true" :scroll-y="true" :class="['bole-calendar-inner', { isCollapse }]"> | 
|---|
|  |  |  | <nut-calendar-card v-model="model" class="bole-calendar"></nut-calendar-card> | 
|---|
|  |  |  | </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 { ref, watch } from 'vue'; | 
|---|
|  |  |  | 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'); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | console.log('222', 223); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|