feat(calendar): 增加footerSlot属性判断是否使用 footer 插槽

nutui-uniapp · Nov 8, 2023 · 6e53d43 · 6e53d43 · vercel · Nov 8, 2023
1 parent 3819937
commit 6e53d43
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 226 deletions.
diff --git a/docs/components/dentry/calendar.md b/docs/components/dentry/calendar.md
@@ -574,6 +574,7 @@ export default {
     v-model:visible="isVisible"
     :default-value="date"
     :poppable="true"
+    footer-slot
     :is-auto-back-fill="false"
     @close="closeSwitch('isVisible')"
     @select="setSelectalue"
@@ -801,6 +802,7 @@ export default {
 | to-date-animation          | 是否启动滚动动画              | boolean          | `true` |
 | first-day-of-week          | 设置周起始日              | 0-6          | `0` |
 | disabled-date `v1.4.0` | 一个用来判断该日期是否被禁用的函数，接受一个`年-月-日`作为参数。 应该返回一个 Boolean 值。 | function | `-` |
+| footer-slot `v1.4.0` | 是否使用footer插槽，如果使用此值必须为 true | Boolean | `false` |
 ### Events
 
 | 事件名 | 说明                         | 回调参数                     |
@@ -817,7 +819,7 @@ export default {
 | day  `不支持微信小程序` |  日期信息 |
 | topInfo `不支持微信小程序` |  日期顶部信息 |
 | bottomInfo `不支持微信小程序` |  日期底部信息 |
-| footerInfo `v1.1.6` | 日历自定义底部，替代confirm按钮（不支持微信小程序）        |
+| footer `v1.4.0` | 日历自定义底部，替代confirm按钮        |
 ### Methods
 
 通过 [ref](https://vuejs.org/guide/essentials/template-refs.html) 可以获取到 `Calendar` 实例并调用实例方法。

diff --git a/example/package.json b/example/package.json
@@ -40,20 +40,20 @@
     "type-check": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-app-plus": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-components": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-h5": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3090420231023001",
+    "@dcloudio/uni-app": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-app-plus": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-components": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-h5": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3090720231104001",
     "@uni-helper/uni-env": "^0.0.3",
     "nutui-uniapp": "workspace:^",
     "pinia": "2.0.36",
@@ -62,10 +62,10 @@
   },
   "devDependencies": {
     "@dcloudio/types": "^3.4.1",
-    "@dcloudio/uni-automator": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3090420231023001",
-    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3090420231023001",
+    "@dcloudio/uni-automator": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-cli-shared": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/uni-stacktracey": "3.0.0-alpha-3090720231104001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-alpha-3090720231104001",
     "@iconify-json/tabler": "^1.1.79",
     "@uni-helper/uni-app-types": "^0.5.12",
     "@uni-helper/vite-plugin-uni-components": "^0.0.8",

diff --git a/example/src/pages/demo/dentry/calendar/index.vue b/example/src/pages/demo/dentry/calendar/index.vue
@@ -351,10 +351,11 @@ export default {
         :default-value="date10"
         :poppable="true"
         :is-auto-back-fill="false"
+        footer-slot
         @close="closeSwitch('isVisible10')"
         @select="setSelectalue10"
       >
-        <template #footerInfo="dateInfo">
+        <template #footer="dateInfo">
           <view class="flex justify-center w-full">
             <nut-button size="large" block round type="primary" :disabled="disabled10" @click="clickBtn10(dateInfo)">
               {{
@@ -391,7 +392,7 @@ export default {
         </template>
         <template #bottomInfo="date">
           <view class="info">
-            {{ date.date ? ((date.date as any).day === 10 ? '十' : '') : '' }}
+            {{ (date?.date as any)?.day === '10' ? '十' : '' }}
           </view>
         </template>
       </nut-calendar>

diff --git a/packages/nutui/components/calendar/calendar.ts b/packages/nutui/components/calendar/calendar.ts
@@ -69,6 +69,10 @@ export const calendarProps = {
     validator: (val: number) => val >= 0 && val <= 6,
   },
   disabledDate: Function,
+  footerSlot: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export type CalendarProps = ExtractPropTypes<typeof calendarProps>

diff --git a/packages/nutui/components/calendar/calendar.vue b/packages/nutui/components/calendar/calendar.vue
@@ -26,7 +26,7 @@ const bottomInfo = computed(() => {
   return slots.bottomInfo
 })
 const footerInfo = computed(() => {
-  return slots['footer-info']
+  return slots.footer
 })
 // element refs
 const calendarRef = ref<null | CalendarInst>(null)
@@ -103,6 +103,7 @@ export default defineComponent({
       :to-date-animation="toDateAnimation"
       :first-day-of-week="firstDayOfWeek"
       :disabled-date="disabledDate"
+      :footer-slot="footerSlot"
       @update="update"
       @close="close"
       @choose="choose"
@@ -120,8 +121,8 @@ export default defineComponent({
       <template v-if="bottomInfo" #bottomInfo="date">
         <slot name="bottomInfo" :date="date.date" />
       </template>
-      <template v-if="footerInfo" #footer-info="date">
-        <slot name="footerInfo" :date="date.date" />
+      <template #footer="date">
+        <slot name="footer" :date="date.date" />
       </template>
     </NutCalendarItem>
   </NutPoPUp>
@@ -143,6 +144,7 @@ export default defineComponent({
     :show-today="showToday"
     :first-day-of-week="firstDayOfWeek"
     :disabled-date="disabledDate"
+    :footer-slot="footerSlot"
     @close="close"
     @choose="choose"
     @select="select"
@@ -159,8 +161,8 @@ export default defineComponent({
     <template v-if="bottomInfo" #bottomInfo="date">
       <slot name="bottomInfo" :date="date.date" />
     </template>
-    <template v-if="footerInfo" #footer-info="date">
-      <slot name="footerInfo" :date="date.date" />
+    <template v-if="footerInfo" #footer="date">
+      <slot name="footer" :date="date.date" />
     </template>
   </NutCalendarItem>
 </template>

diff --git a/packages/nutui/components/calendaritem/calendaritem.ts b/packages/nutui/components/calendaritem/calendaritem.ts
@@ -63,6 +63,10 @@ export const calendaritemProps = {
     default: 0,
   },
   disabledDate: Function,
+  footerSlot: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export const calendaritemEmits = {

diff --git a/packages/nutui/components/calendaritem/calendaritem.vue b/packages/nutui/components/calendaritem/calendaritem.vue
@@ -784,11 +784,11 @@ export default defineComponent({
     </scroll-view>
     <!-- footer -->
     <view v-if="poppable && !isAutoBackFill" class="nut-calendar__footer">
-      <slot name="footer-info" :date="state.chooseData">
-        <view class="nut-calendar__confirm" @click="confirm">
-          {{ confirmText || translate('confirm') }}
-        </view>
-      </slot>
+      <slot v-if="footerSlot" name="footer" :date="state.chooseData" />
+
+      <view v-else class="nut-calendar__confirm" @click="confirm">
+        {{ confirmText || translate('confirm') }}
+      </view>
     </view>
   </view>
 </template>