feat(calendar): 日历底部增加插槽 (#2550)

--------- Co-authored-by: sunqixiong <[email protected]>
jdf2e · Sep 11, 2023 · 10eeae2 · 10eeae2
1 parent 8034b3d
commit 10eeae2
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 6 deletions.
diff --git a/src/packages/__VUE/calendar/demo.vue b/src/packages/__VUE/calendar/demo.vue
@@ -185,6 +185,29 @@
         </template>
       </nut-calendar>
     </div>
+    <div>
+      <nut-cell
+        :show-icon="true"
+        :title="translate('custom_footer')"
+        :desc="date10 ? `${date10}` : translate('please')"
+        @click="openSwitch('isVisible10')"
+      >
+      </nut-cell>
+      <nut-calendar
+        v-model:visible="isVisible10"
+        :default-value="date10"
+        :poppable="true"
+        :is-auto-back-fill="false"
+        @close="closeSwitch('isVisible10')"
+        @select="setSelectalue10"
+      >
+        <template #footer-info="dateInfo">
+          <nut-button size="large" block round type="primary" :disabled="disabled10" @click="clickBtn10(dateInfo)">{{
+            disabled10 ? translate('custom_footer_text1') : translate('custom_footer_text2')
+          }}</nut-button>
+        </template>
+      </nut-calendar>
+    </div>
     <h2>{{ translate('title3') }}</h2>
     <div>
       <nut-cell
@@ -244,6 +267,9 @@ const initTranslate = () =>
       conjunction: '至',
       custom_btn: '自定义按钮',
       timeText: '自定义时间文案',
+      custom_footer: '自定义底部',
+      custom_footer_text1: '偶数的日期不能选择',
+      custom_footer_text2: '奇数的日期可以选择',
 
       goDate: '去某个月',
       seven: '最近七天',
@@ -269,6 +295,9 @@ const initTranslate = () =>
       conjunction: '-',
       custom_btn: 'Custom Button',
       timeText: 'Custom Date Text',
+      custom_footer: 'Custom Footer',
+      custom_footer_text1: 'Even dates cannot be selected',
+      custom_footer_text2: 'Odd dates can be selected',
 
       goDate: 'Go Date',
       seven: 'Last Seven Days',
@@ -297,6 +326,7 @@ export default defineComponent({
       date7: [] as string[],
       date8: '',
       date9: [] as string[],
+      date10: '2023-09-03',
       isVisible1: false,
       isVisible2: false,
       isVisible3: false,
@@ -305,7 +335,9 @@ export default defineComponent({
       isVisible6: false,
       isVisible7: false,
       isVisible8: false,
-      isVisible9: false
+      isVisible9: false,
+      isVisible10: false,
+      disabled10: false
     });
     const openSwitch = (param: string) => {
       (state as any)[`${param}`] = true;
@@ -359,6 +391,10 @@ export default defineComponent({
       let { weekDate } = param;
       state.date9 = [weekDate[0].date[3], weekDate[1].date[3]];
     };
+    const setSelectalue10 = (param: any) => {
+      state.disabled10 = param[2] % 2 === 0;
+    };
+
     const clickBtn = () => {
       let date = [Utils.date2Str(new Date()), Utils.getDay(6)];
       state.date5 = date;
@@ -382,6 +418,10 @@ export default defineComponent({
     const renderDate = (date: { date: Day }) => {
       return +date.date.day <= 9 ? '0' + date.date.day : date.date.day;
     };
+    const clickBtn10 = (dateInfo: any) => {
+      state.date10 = dateInfo.date[3];
+      state.isVisible10 = false;
+    };
     return {
       ...toRefs(state),
       openSwitch,
@@ -396,13 +436,15 @@ export default defineComponent({
       setChooseValue6,
       setChooseValue8,
       setChooseValue9,
+      setSelectalue10,
       clickBtn,
       clickBtn1,
       goDate,
       calendarRef,
       select,
       translate,
-      renderDate
+      renderDate,
+      clickBtn10
     };
   }
 });

diff --git a/src/packages/__VUE/calendar/doc.en-US.md b/src/packages/__VUE/calendar/doc.en-US.md
@@ -632,6 +632,71 @@ When set to week selection, the start and end dates of the week will be determin
 
 :::
 
+### Custom Footer
+
+:::demo
+
+```html
+<template>
+  <nut-cell
+    :show-icon="true"
+    title="Custom Footer"
+    :desc="date ? `${date}` : 'Please Select Date'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    :poppable="true"
+    :is-auto-back-fill="false"
+    @close="closeSwitch('isVisible')"
+    @select="setSelectalue"
+  >
+    <template #footer-info="dateInfo">
+      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)"
+        >{{ disabled?'Even dates cannot be selected':'Odd dates can be selected' }}</nut-button
+      >
+    </template>
+  </nut-calendar>
+</template>
+
+<script lang="ts">
+  import { reactive, toRefs, ref } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        date: '2023-09-03',
+        isVisible: false,
+        disabled: false
+      });
+      const openSwitch = (param) => {
+        state[`${param}`] = true;
+      };
+      const closeSwitch = (param) => {
+        state[`${param}`] = false;
+      };
+      const setSelectalue = (param: any) => {
+        state.disabled = param[2] % 2 === 0;
+      };
+      const clickBtn = (dateInfo: any) => {
+        state.date = dateInfo.date[3];
+        state.isVisible = false;
+      };
+      return {
+        ...toRefs(state),
+        setSelectalue,
+        openSwitch,
+        closeSwitch,
+        clickBtn
+      };
+    }
+  };
+</script>
+```
+
+:::
+
 ### Tiled Display
 
 :::demo
@@ -716,6 +781,7 @@ When set to week selection, the start and end dates of the week will be determin
 | day         | Date information                                             |
 | top-info    | Date top information                                         |
 | bottom-info | Date bottom information                                      |
+| footer-info | Custom calendar Footer, replace confirm btn                  |
 
 ### Methods
 

diff --git a/src/packages/__VUE/calendar/doc.md b/src/packages/__VUE/calendar/doc.md
@@ -583,6 +583,71 @@ app.use(Calendar);
 
 :::
 
+### 自定义底部区域
+
+:::demo
+
+```html
+<template>
+  <nut-cell
+    :show-icon="true"
+    title="自定义底部区域"
+    :desc="date ? `${date}` : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    :poppable="true"
+    :is-auto-back-fill="false"
+    @close="closeSwitch('isVisible')"
+    @select="setSelectalue"
+  >
+    <template #footer-info="dateInfo">
+      <nut-button size="large" block round type="primary" :disabled="disabled" @click="clickBtn(dateInfo)"
+        >{{ disabled?'偶数的日期不能选择':'奇数的日期可以选择' }}</nut-button
+      >
+    </template>
+  </nut-calendar>
+</template>
+
+<script lang="ts">
+  import { reactive, toRefs, ref } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        date: '2023-09-03',
+        isVisible: false,
+        disabled: false
+      });
+      const openSwitch = (param) => {
+        state[`${param}`] = true;
+      };
+      const closeSwitch = (param) => {
+        state[`${param}`] = false;
+      };
+      const setSelectalue = (param: any) => {
+        state.disabled = param[2] % 2 === 0;
+      };
+      const clickBtn = (dateInfo: any) => {
+        state.date = dateInfo.date[3];
+        state.isVisible = false;
+      };
+      return {
+        ...toRefs(state),
+        setSelectalue,
+        openSwitch,
+        closeSwitch,
+        clickBtn
+      };
+    }
+  };
+</script>
+```
+
+:::
+
 ### 自定义周起始日
 
 :::demo
@@ -726,6 +791,7 @@ app.use(Calendar);
 | day         | 日期信息                                 |
 | top-info    | 日期顶部信息                             |
 | bottom-info | 日期底部信息                             |
+| footer-info | 日历自定义底部，替代confirm按钮          |
 
 ### Methods
 

diff --git a/src/packages/__VUE/calendar/index.taro.vue b/src/packages/__VUE/calendar/index.taro.vue
@@ -46,6 +46,9 @@
       <template v-if="bottomInfo" #bottom-info="date">
         <slot name="bottom-info" :date="date.date"> </slot>
       </template>
+      <template v-if="footerInfo" #footer-info="date">
+        <slot name="footer-info" :date="date.date"> </slot>
+      </template>
     </nut-calendar-item>
   </nut-popup>
   <nut-calendar-item
@@ -183,6 +186,9 @@ export default create({
     const bottomInfo = computed(() => {
       return slots['bottom-info'];
     });
+    const footerInfo = computed(() => {
+      return slots['footer-info'];
+    });
     // element refs
     const calendarRef = ref<null | CalendarRef>(null);
     const scrollToDate = (date: string) => {
@@ -228,7 +234,8 @@ export default create({
       showTopBtn,
       topInfo,
       dayInfo,
-      bottomInfo
+      bottomInfo,
+      footerInfo
     };
   }
 });

diff --git a/src/packages/__VUE/calendar/index.vue b/src/packages/__VUE/calendar/index.vue
@@ -45,6 +45,9 @@
       <template v-if="bottomInfo" #bottom-info="date">
         <slot name="bottom-info" :date="date.date"> </slot>
       </template>
+      <template v-if="footerInfo" #footer-info="date">
+        <slot name="footer-info" :date="date.date"> </slot>
+      </template>
     </nut-calendar-item>
   </nut-popup>
   <nut-calendar-item
@@ -183,6 +186,9 @@ export default create({
     const bottomInfo = computed(() => {
       return slots['bottom-info'];
     });
+    const footerInfo = computed(() => {
+      return slots['footer-info'];
+    });
     // element refs
     const calendarRef = ref<null | CalendarRef>(null);
     const scrollToDate = (date: string) => {
@@ -228,7 +234,8 @@ export default create({
       showTopBtn,
       topInfo,
       dayInfo,
-      bottomInfo
+      bottomInfo,
+      footerInfo
     };
   }
 });

diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -75,7 +75,9 @@
     </nut-scroll-view>
     <!-- footer-->
     <view v-if="poppable && !isAutoBackFill" class="nut-calendar__footer">
-      <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
+      <slot name="footer-info" :date="chooseData">
+        <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
+      </slot>
     </view>
   </view>
 </template>

diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
@@ -68,7 +68,9 @@
     </view>
     <!-- footer-->
     <view v-if="poppable && !isAutoBackFill" class="nut-calendar__footer">
-      <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
+      <slot name="footer-info" :date="chooseData">
+        <view class="nut-calendar__confirm" @click="confirm">{{ confirmText || translate('confirm') }}</view>
+      </slot>
     </view>
   </view>
 </template>