fix(calendar): enable reactive for props

Tencent · Jul 26, 2023 · 2d71344 · 2d71344
1 parent 04754e0
commit 2d71344
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 16 deletions.
diff --git a/src/calendar/calendar.vue b/src/calendar/calendar.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineEmits, defineProps, provide } from 'vue';
+import { defineEmits, defineProps, provide, reactive } from 'vue';
 
 import TPopup from '../popup';
 import config from '../config';
@@ -36,7 +36,8 @@ export default {
 
 <script setup lang="ts">
 const props = defineProps(calendarProps);
-provide('templateProps', { ...props });
+
+provide('templateProps', reactive(props));
 
 const emit = defineEmits(['update:visible']);
 

diff --git a/src/calendar/template.vue b/src/calendar/template.vue
@@ -80,12 +80,11 @@ const getYearMonthDay = (date: Date) => {
   };
 };
 
-const title = ref(props.title);
-const usePopup = ref(props.usePopup);
+const title = computed(() => props.title);
+const usePopup = computed(() => props.usePopup);
 const valueRef = ref(props.value);
 const selectedDate = ref();
 const firstDayOfWeek = computed(() => props.firstDayOfWeek || 0);
-const type = ref(props.type);
 const days = computed(() => {
   const raw = '日一二三四五六';
   const ans = [];
@@ -99,10 +98,10 @@ const days = computed(() => {
   return ans;
 });
 const today = new Date();
-const minDate = props.minDate ? new Date(props.minDate) : today;
-const maxDate = props.maxDate
-  ? new Date(props.maxDate)
-  : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
+const minDate = computed(() => (props.minDate ? new Date(props.minDate) : today));
+const maxDate = computed(() =>
+  props.maxDate ? new Date(props.maxDate) : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate()),
+);
 
 // 获取日期
 const getDate = (year: number, month: number, day: number) => new Date(year, month, day);
@@ -117,7 +116,7 @@ const handleSelect = (year: number, month: number, date: number, dateItem: TDate
   if (dateItem.type === 'disabled') return;
   const selected = new Date(year, month, date);
 
-  if (type.value === 'range' && Array.isArray(selectedDate.value)) {
+  if (props.type === 'range' && Array.isArray(selectedDate.value)) {
     if (selectedDate.value.length === 1) {
       if (selectedDate.value[0] > selected) {
         selectedDate.value = [selected];
@@ -181,21 +180,21 @@ const isSameDate = (date1: CompareDate, date2: CompareDate) => {
 
 const months = computed(() => {
   const ans = [];
-  let { year: minYear, month: minMonth } = getYearMonthDay(minDate);
-  const { year: maxYear, month: maxMonth } = getYearMonthDay(maxDate);
+  let { year: minYear, month: minMonth } = getYearMonthDay(minDate.value);
+  const { year: maxYear, month: maxMonth } = getYearMonthDay(maxDate.value);
   const calcType = (year: number, month: number, date: number): TDateType => {
     const curDate = new Date(year, month, date, 23, 59, 59);
 
-    if (type.value === 'single') {
+    if (props.type === 'single') {
       if (isSameDate({ year, month, date }, selectedDate.value)) return 'selected';
     }
-    if (type.value === 'multiple') {
+    if (props.type === 'multiple') {
       const hit = selectedDate.value.some((item: Date) => isSameDate({ year, month, date }, item));
       if (hit) {
         return 'selected';
       }
     }
-    if (type.value === 'range') {
+    if (props.type === 'range') {
       if (Array.isArray(selectedDate.value)) {
         const [startDate, endDate] = selectedDate.value;
 
@@ -207,7 +206,7 @@ const months = computed(() => {
     }
 
     const minCurDate = new Date(year, month, date, 0, 0, 0);
-    if (curDate.getTime() < minDate.getTime() || minCurDate.getTime() > maxDate.getTime()) {
+    if (curDate.getTime() < minDate.value.getTime() || minCurDate.getTime() > maxDate.value.getTime()) {
       return 'disabled';
     }
     return '';