Merge pull request #243 from xuewenG/fix/calendar-column

根据可见区域宽度决定日历的列数
kingwrcy · Dec 17, 2024 · 0f0b2f8 · 0f0b2f8
2 parents 13309ff + a8fa659
commit 0f0b2f8
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/front/components/DatePicker.vue b/front/components/DatePicker.vue
@@ -27,10 +27,13 @@ const attrs = {
   'is-dark': { selector: 'html', darkClass: 'dark' },
   'first-day-of-week': 2,
 }
+
+const columns = document.body.clientWidth < 520 ? 1 : 2
+
 </script>
 
 <template>
-  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="2" v-bind="{ ...attrs, ...$attrs }" />
+  <VCalendarDatePicker v-if="date && (typeof date === 'object')" v-model.range="date" :columns="columns" v-bind="{ ...attrs, ...$attrs }" />
   <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" />
 </template>