feat(Sku): add safe-area-inset-bottom prop (#4428)

src/sku/README.md

@@ -139,6 +139,7 @@ export default {
 | custom-stepper-config | Custom stepper related config | *object* | `{}` | - |
 | message-config | Message related config | *object* | `{}` | - |
 | get-container | Return the mount node for sku | *string \| () => HTMLElement* | - | - |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
 
 ### Events
 

src/sku/README.zh-CN.md

@@ -143,6 +143,7 @@ export default {
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
 | initial-sku | 默认选中的 sku，具体参考高级用法 | *object* | `{}` | - |
 | show-soldout-sku | 是否展示售罄的 sku，默认展示并置灰 | *boolean* | `true` | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
 
 ### Events
 

src/sku/Sku.js

@@ -36,6 +36,7 @@ export default createComponent({
     customSkuValidator: Function,
     closeOnClickOverlay: Boolean,
     disableStepperInput: Boolean,
+    safeAreaInsetBottom: Boolean,
     resetSelectedSkuOnHide: Boolean,
     quota: {
       type: Number,
@@ -549,6 +550,7 @@ export default createComponent({
         class="van-sku-container"
         getContainer={this.getContainer}
         closeOnClickOverlay={this.closeOnClickOverlay}
+        safeAreaInsetBottom={this.safeAreaInsetBottom}
       >
         {Header}
         <div class="van-sku-body" style={this.bodyStyle}>

src/sku/demo/index.vue

@@ -11,12 +11,13 @@
           :hide-stock="skuData.sku.hide_stock"
           :quota="skuData.quota"
           :quota-used="skuData.quota_used"
-          reset-stepper-on-hide
-          reset-selected-sku-on-hide
-          disable-stepper-input
           :close-on-click-overlay="closeOnClickOverlay"
           :message-config="messageConfig"
           :custom-sku-validator="customSkuValidator"
+          disable-stepper-input
+          reset-stepper-on-hide
+          safe-area-inset-bottom
+          reset-selected-sku-on-hide
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -34,7 +35,6 @@
     <demo-block :title="$t('title2')">
       <div class="sku-container">
         <van-sku
-          hide-quota-text
           v-model="showStepper"
           :sku="skuData.sku"
           :goods="skuData.goods_info"
@@ -44,6 +44,8 @@
           :quota-used="skuData.quota_used"
           :custom-stepper-config="customStepperConfig"
           :message-config="messageConfig"
+          hide-quota-text
+          safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -61,7 +63,6 @@
     <demo-block :title="$t('hideSoldoutSku')">
       <div class="sku-container">
         <van-sku
-          hide-quota-text
           v-model="showSoldout"
           :sku="skuData.sku"
           :goods="skuData.goods_info"
@@ -72,6 +73,8 @@
           :custom-stepper-config="customStepperConfig"
           :message-config="messageConfig"
           :show-soldout-sku="false"
+          hide-quota-text
+          safe-area-inset-bottom
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
@@ -98,6 +101,7 @@
           :quota-used="skuData.quota_used"
           show-add-cart-btn
           reset-stepper-on-hide
+          safe-area-inset-bottom
           :initial-sku="initialSku"
           :message-config="messageConfig"
           @buy-clicked="onBuyClicked"