fix(Calendar): selected date not in view (#1043) (#1102)

Tencent · Sep 19, 2023 · a50391f · a50391f
1 parent d7d6df4
commit a50391f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <calendarTemplate v-if="!usePopup">
+    <calendarTemplate v-if="!usePopup" ref="calendarTemplateRef">
       <template #confirmBtn>
         <slot name="confirmBtn"></slot>
       </template>
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineEmits, defineProps, provide, watch, ref, reactive } from 'vue';
+import { defineEmits, defineProps, provide, watch, ref, reactive, nextTick, onMounted } from 'vue';
 
 import TPopup from '../popup';
 import config from '../config';
@@ -36,19 +36,40 @@ export default {
 
 <script setup lang="ts">
 const props = defineProps(calendarProps);
+const calendarTemplateRef = ref();
 
 provide('templateProps', reactive(props));
 
 const emit = defineEmits(['update:visible']);
 
+const selectedValueIntoView = () => {
+  const type = props.type === 'range' ? 'start' : 'selected';
+  const { templateRef } = calendarTemplateRef.value;
+  const scrollContainer = templateRef.querySelector(`.${name}__months`);
+  const selectedDate = templateRef.querySelector(`.${name}__dates-item--${type}`)?.parentNode?.previousElementSibling;
+  if (selectedDate) {
+    scrollContainer.scrollTop = selectedDate.offsetTop - scrollContainer.offsetTop;
+  }
+};
+
 const onVisibleChange = (v: boolean) => {
   emit('update:visible', v);
 };
 const onPopupVisibleChange = (v: boolean) => {
-  if (!v) props.onClose?.('overlay');
+  if (!v) {
+    props.onClose?.('overlay');
+  } else {
+    nextTick(() => {
+      selectedValueIntoView();
+    });
+  }
   emit('update:visible', v);
 };
-const calendarTemplateRef = ref();
+
+onMounted(() => {
+  if (!props.usePopup) selectedValueIntoView();
+});
+
 watch(
   () => props.value,
   (val) => {

diff --git a/src/calendar/template.vue b/src/calendar/template.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ [`${name}`]: true, [`${name}--popup`]: usePopup }">
+  <div ref="templateRef" :class="{ [`${name}`]: true, [`${name}--popup`]: usePopup }">
     <div :class="`${name}__title`">
       <slot name="title">{{ title || '请选择日期' }}</slot>
     </div>
@@ -82,6 +82,7 @@ const getYearMonthDay = (date: Date) => {
 
 const title = computed(() => props.title);
 const usePopup = computed(() => props.usePopup);
+const templateRef = ref(null);
 const valueRef = ref(props.value);
 const selectedDate = ref();
 const firstDayOfWeek = computed(() => props.firstDayOfWeek || 0);
@@ -253,5 +254,6 @@ watch(
 );
 defineExpose({
   valueRef,
+  templateRef,
 });
 </script>