feat(Calendar): add safe-area-inset-bottom prop、footer slot

src/calendar/README.zh-CN.md

@@ -35,6 +35,7 @@ Vue.use(Calendar);
 | button-text | 选择日期区间时，确认按钮的文字 | `string` | `确定` | - |
 | button-disabled-text | 选择日期区间时，确认按钮处于禁用状态时的文字 | `string` | `确定` | - |
 | show-mark | 是否显示月份背景水印 | `boolean` | `true` | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `true` | - |
 
 ### Events
 
@@ -47,6 +48,7 @@ Vue.use(Calendar);
 | 名称 | 说明 |
 |------|------|
 | title | 自定义标题 |
+| footer | 自定义底部区域内容 |
 
 ### 方法
 

src/calendar/index.js

@@ -40,6 +40,10 @@ export default createComponent({
     showMark: {
       type: Boolean,
       default: true
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -214,26 +218,42 @@ export default createComponent({
       );
     },
 
-    genFooter() {
+    genFooterContent() {
+      const slot = this.slots('footer');
+
+      if (slot) {
+        return slot;
+      }
+
       if (this.type === 'range') {
         const disabled = !this.currentValue[1];
         const text = disabled ? this.buttonDisabledText : this.buttonText;
 
         return (
-          <div class={bem('footer')}>
+          <Button
-            <Button
+            round
-              round
+            block
-              block
+            type="danger"
-              type="danger"
+            disabled={disabled}
-              disabled={disabled}
+            class={bem('confirm')}
-              class={bem('confirm')}
+            onClick={this.onConfirmRange}
-              onClick={this.onConfirmRange}
+          >
-            >
+            {text || t('confirm')}
-              {text || t('confirm')}
+          </Button>
-            </Button>
-          </div>
         );
       }
+    },
+
+    genFooter() {
+      return (
+        <div
+          class={bem('footer', {
+            'safe-area-inset-bottom': this.safeAreaInsetBottom
+          })}
+        >
+          {this.genFooterContent()}
+        </div>
+      );
     }
   },
 

src/calendar/index.less

@@ -118,11 +118,18 @@
   }
 
   &__footer {
-    padding: 7px @padding-md;
+    flex-shrink: 0;
+    padding: 0 @padding-md;
+
+    &--safe-area-inset-bottom {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
   }
 
   &__confirm {
     height: 36px;
+    margin: 7px 0;
     line-height: 34px;
   }
 }