feat(calendar): 新增 btn-slot属性控制是否使用btn 插槽

link #131
nutui-uniapp · Dec 1, 2023 · 3b66919 · 3b66919 · vercel · Dec 1, 2023
1 parent dcd6a6c
commit 3b66919
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/docs/components/dentry/calendar.md b/docs/components/dentry/calendar.md
@@ -360,6 +360,7 @@ export default {
     type="range"
     :start-date="null"
     :end-date="null"
+    :btn-slot="true"
     @close="closeSwitch('isVisible')"
     @choose="setChooseValue"
   >
@@ -802,7 +803,9 @@ 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` |
+| footer-slot `v1.4.0` | 是否使用footer插槽，如果使用，此值必须为 true | Boolean | `false` |
+| btn-slot `v1.5.7` | 是否使用btn插槽，如果使用，此值必须为 true | Boolean | `false` |
+
 ### Events
 
 | 事件名 | 说明                         | 回调参数                     |

diff --git a/example/src/pages/demo/dentry/calendar/index.vue b/example/src/pages/demo/dentry/calendar/index.vue
@@ -68,7 +68,7 @@ export default {
       state[`${param as 'isVisible1'}`] = false
     }
 
-    const setChooseValue = (param: string) => {
+    const setChooseValue = (param: any) => {
       state.date = param[3]
       state.dateWeek = param[4]
     }
@@ -80,25 +80,25 @@ export default {
     const select = (param: string) => {
       uni.showToast({ title: JSON.stringify(param) })
     }
-    const setChooseValue1 = (param: string) => {
+    const setChooseValue1 = (param: any) => {
       state.date1 = [...[param[0][3], param[1][3]]]
     }
 
-    const setChooseValue2 = (param: string) => {
+    const setChooseValue2 = (param: any) => {
       state.date2 = param[3]
     }
 
-    const setChooseValue3 = (param: string) => {
+    const setChooseValue3 = (param: any) => {
       state.date3 = param[3]
     }
-    const setChooseValue4 = (param: string) => {
+    const setChooseValue4 = (param: any) => {
       state.date4 = [...[param[0][3], param[1][3]]]
     }
 
-    const setChooseValue5 = (param: string) => {
+    const setChooseValue5 = (param: any) => {
       state.date5 = [...[param[0][3], param[1][3]]]
     }
-    const setChooseValue6 = (param: string) => {
+    const setChooseValue6 = (param: any) => {
       state.date6 = [...[param[0][3], param[1][3]]]
     }
     const setChooseValue7 = (chooseData: any) => {
@@ -107,7 +107,7 @@ export default {
       })
       state.date7 = [...dateArr]
     }
-    const setChooseValue8 = (param: string) => {
+    const setChooseValue8 = (param: any) => {
       state.date8 = param[3]
     }
     const setChooseValue9 = (param: any) => {
@@ -311,6 +311,7 @@ export default {
         v-model:visible="isVisible5"
         :default-value="date5"
         safe-area-inset-bottom
+        :btn-slot="true"
         type="range"
         @close="closeSwitch('isVisible5')"
         @choose="setChooseValue5"

diff --git a/packages/nutui/components/calendar/calendar.ts b/packages/nutui/components/calendar/calendar.ts
@@ -94,9 +94,13 @@ export const calendarProps = {
   disabledDate: Function,
 
   /**
-   * @description 是否使用 footer 插槽，如果使用此值必须为 true
+   * @description 是否使用 footer 插槽，如果使用,此值必须为 true
    */
   footerSlot: Boolean,
+  /**
+   * @description 是否使用 btn 插槽，如果使用,此值必须为 true
+   */
+  btnSlot: Boolean,
 }
 
 export type CalendarProps = ExtractPropTypes<typeof calendarProps>

diff --git a/packages/nutui/components/calendar/calendar.vue b/packages/nutui/components/calendar/calendar.vue
@@ -106,6 +106,7 @@ export default defineComponent({
       :first-day-of-week="firstDayOfWeek"
       :disabled-date="disabledDate"
       :footer-slot="footerSlot"
+      :btn-slot="btnSlot"
       @update="update"
       @close="close"
       @choose="choose"
@@ -147,6 +148,7 @@ export default defineComponent({
     :first-day-of-week="firstDayOfWeek"
     :disabled-date="disabledDate"
     :footer-slot="footerSlot"
+    :btn-slot="btnSlot"
     @close="close"
     @choose="choose"
     @select="select"

diff --git a/packages/nutui/components/calendaritem/calendaritem.ts b/packages/nutui/components/calendaritem/calendaritem.ts
@@ -93,9 +93,13 @@ export const calendaritemProps = {
   disabledDate: Function,
 
   /**
-   * @description 是否使用 footer 插槽，如果使用此值必须为 true
+   * @description 是否使用 footer 插槽，如果使用,此值必须为 true
    */
   footerSlot: Boolean,
+  /**
+   * @description 是否使用 btn 插槽，如果使用,此值必须为 true
+   */
+  btnSlot: Boolean,
 }
 
 export const calendaritemEmits = {

diff --git a/packages/nutui/components/calendaritem/calendaritem.vue b/packages/nutui/components/calendaritem/calendaritem.vue
@@ -44,9 +44,6 @@ const compConthsData = computed(() => {
   return state.monthsData.slice(state.defaultRange[0], state.defaultRange[1])
 })
 const scrollWithAnimation = ref(false)
-const showTopBtn = computed(() => {
-  return slots.btn
-})
 const topInfo = computed(() => {
   return slots.topInfo
 })
@@ -710,7 +707,7 @@ export default defineComponent({
       <view v-if="showTitle" class="nut-calendar__header-title">
         {{ title || translate('title') }}
       </view>
-      <view v-if="showTopBtn" class="nut-calendar__header-slot">
+      <view v-if="btnSlot" class="nut-calendar__header-slot">
         <slot name="btn" />
       </view>
       <view v-if="showSubTitle" class="nut-calendar__header-subtitle">