ソースを参照

feat(Picker、DatePicker):新增safe-area-inset-bottom属性 (#1770)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom
yangxiaolu1993 3 年 前
コミット
a9f42fc805

+ 1 - 0
src/packages/__VUE/datepicker/doc.en-US.md

@@ -380,6 +380,7 @@ app.use(OverLay);
 | cancel-text           | Text of cancel button                                          | String  | cancel   |
 | three-dimensional  `v3.1.23`          | Turn on 3D effects               | Boolean  | true   |
 | swipe-duration `v3.2.2`          | Duration of the momentum animation        | Number、String  | 1000   |
+| safe-area-inset-bottom `v3.2.4`	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
 
 ### Events
 

+ 1 - 0
src/packages/__VUE/datepicker/doc.md

@@ -389,6 +389,7 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 | cancel-text           | 取消按钮文案                                          | String  | 取消   |
 | three-dimensional `v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
 | swipe-duration `v3.2.2`          | 惯性滚动时长               | Number、String  | 1000    |
+| safe-area-inset-bottom `v3.2.4`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
 
 ### Events
     

+ 2 - 0
src/packages/__VUE/datepicker/index.taro.vue

@@ -12,6 +12,8 @@
     :isWrapTeleport="isWrapTeleport"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
+    :safeAreaInsetBottom="safeAreaInsetBottom"
+    :destroyOnClose="destroyOnClose"
   >
     <template #top>
       <slot name="top"></slot>

+ 2 - 0
src/packages/__VUE/datepicker/index.vue

@@ -12,6 +12,8 @@
     :isWrapTeleport="isWrapTeleport"
     :threeDimensional="threeDimensional"
     :swipeDuration="swipeDuration"
+    :safeAreaInsetBottom="safeAreaInsetBottom"
+    :destroyOnClose="destroyOnClose"
   >
     <template #top>
       <slot name="top"></slot>

+ 1 - 0
src/packages/__VUE/picker/doc.en-US.md

@@ -431,6 +431,7 @@ Slots are arranged at the bottom and top respectively for custom Settings
 | ok-text                | Text of confirm button               | String  | confirm   |
 | three-dimensional `v3.1.23`          | Turn on 3D effects      | Boolean  | true   |
 | swipe-duration`v3.2.2`          | Duration of the momentum animation        | Number、String  | 1000   |
+| safe-area-inset-bottom `v3.2.4`	| Whether to enable iPhone series full screen bottom safety zone adaptation, which is only valid when `position` is  `bottom` |	Boolean	|`false`     |
 
 ### Data Structure of Columns
 

+ 2 - 1
src/packages/__VUE/picker/doc.md

@@ -428,8 +428,9 @@ Picker 组件在底部和顶部分别设置了插槽,可进行自定义设置
 | ok-text                | 确定按钮文案               | String  | 确定   |
 | three-dimensional`v3.1.23`          | 是否开启3D效果               | Boolean  | true   |
 | swipe-duration`v3.2.2`          | 惯性滚动时长        | Number、String  | 1000   |
+| safe-area-inset-bottom `v3.2.4`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
 
-注:自 `v3.2.3` 起,在 @nutui/nutui-taro 中,取消 3D 展示效果,`three-dimensional` 废弃。
+> 注:自 `v3.2.3` 起,在 @nutui/nutui-taro 中,取消 3D 展示效果,`three-dimensional` 废弃。
 ### Columns 数据结构
 
 | 参数         | 说明                             | 类型   | 默认值           |

+ 2 - 0
src/packages/__VUE/picker/index.taro.vue

@@ -8,6 +8,8 @@
       :close-on-click-overlay="closeOnClickOverlay"
       @close="close"
       :round="true"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :destroyOnClose="destroyOnClose"
     >
       <view class="nut-picker__bar">
         <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="close">{{

+ 2 - 0
src/packages/__VUE/picker/index.vue

@@ -9,6 +9,8 @@
       @close="close"
       :round="true"
       :isWrapTeleport="isWrapTeleport"
+      :safeAreaInsetBottom="safeAreaInsetBottom"
+      :destroyOnClose="destroyOnClose"
     >
       <view class="nut-picker__bar">
         <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="close">{{

+ 1 - 0
src/sites/mobile-taro/vue/src/dentry/pages/datepicker/index.vue

@@ -27,6 +27,7 @@
       v-model:visible="show"
       :threeDimensional="false"
       :is-show-chinese="true"
+      :safeAreaInsetBottom="true"
     ></nut-datepicker>
     <!-- 选择月日 -->
     <nut-datepicker

+ 1 - 0
src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue

@@ -15,6 +15,7 @@
       v-model:visible="show"
       :columns="columns"
       title="城市选择"
+      :safeAreaInsetBottom="true"
       @change="change"
       @confirm="(options) => confirm('index', options)"
     ></nut-picker>