fix(calendar): 修复初次打开默认值定位问题 (#2829)

jdf2e · Jan 10, 2024 · fe8fc9e · fe8fc9e
1 parent 0a4788b
commit fe8fc9e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 10 deletions.
diff --git a/src/packages/__VUE/calendar/index.taro.vue b/src/packages/__VUE/calendar/index.taro.vue
@@ -1,16 +1,16 @@
 <template>
   <nut-popup
     v-if="poppable"
-    :visible="visible"
+    v-model:visible="visible"
     position="bottom"
     round
     closeable
     v-bind="$attrs"
     :style="{ height: '85vh' }"
     :lock-scroll="lockScroll"
     :catch-move="lockScroll"
-    @click-overlay="closePopup"
-    @click-close-icon="closePopup"
+    :destroy-on-close="false"
+    @opened="opened"
   >
     <nut-calendar-item
       ref="calendarRef"
@@ -90,7 +90,7 @@
   </nut-calendar-item>
 </template>
 <script lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import NutCalendarItem from '../calendaritem/index.taro.vue';
@@ -153,7 +153,7 @@ export default create({
       default: ''
     },
     defaultValue: {
-      type: [String, Array]
+      type: [String, Array] as PropType<string | string[]>
     },
     startDate: {
       type: String,
@@ -176,6 +176,14 @@ export default create({
   },
   emits: ['choose', 'close', 'update:visible', 'select'],
   setup(props, { emit, slots, expose }) {
+    const visible = computed({
+      get() {
+        return props.visible;
+      },
+      set(val) {
+        emit('update:visible', val);
+      }
+    });
     const showTopBtn = computed(() => {
       return slots.btn;
     });
@@ -226,8 +234,22 @@ export default create({
       emit('select', param);
     };
 
+    const opened = () => {
+      if (props.defaultValue) {
+        if (Array.isArray(props.defaultValue)) {
+          if (props.defaultValue?.length) {
+            calendarRef.value?.scrollToDate(props.defaultValue?.[0]);
+          }
+        } else {
+          calendarRef.value?.scrollToDate(props.defaultValue);
+        }
+      }
+    };
+
     return {
+      visible,
       closePopup,
+      opened,
       update,
       close,
       select,

diff --git a/src/packages/__VUE/calendar/index.vue b/src/packages/__VUE/calendar/index.vue
@@ -1,15 +1,14 @@
 <template>
   <nut-popup
     v-if="poppable"
-    :visible="visible"
+    v-model:visible="visible"
     position="bottom"
     round
     closeable
     v-bind="$attrs"
     :style="{ height: '85vh' }"
     :lock-scroll="lockScroll"
-    @click-overlay="closePopup"
-    @click-close-icon="closePopup"
+    @opened="opened"
   >
     <nut-calendar-item
       ref="calendarRef"
@@ -176,6 +175,14 @@ export default create({
   },
   emits: ['choose', 'close', 'update:visible', 'select'],
   setup(props, { emit, slots, expose }) {
+    const visible = computed({
+      get() {
+        return props.visible;
+      },
+      set(val) {
+        emit('update:visible', val);
+      }
+    });
     const showTopBtn = computed(() => {
       return slots.btn;
     });
@@ -226,8 +233,14 @@ export default create({
       emit('select', param);
     };
 
+    const opened = () => {
+      calendarRef.value?.initPosition();
+    };
+
     return {
+      visible,
       closePopup,
+      opened,
       update,
       close,
       select,

diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
@@ -75,7 +75,7 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, ref, watch, toRefs, computed } from 'vue';
+import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
@@ -810,7 +810,9 @@ export default create({
     };
 
     // 初始化数据
-    initData();
+    onMounted(() => {
+      initData();
+    });
 
     //监听 默认值更改
     watch(