feat: Picker 组件新增 showOkText、showCancelText (#1933)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题 * fix: 地址关闭时, Close 事件触发两次问题解决 * feat: 组件DatePicker 添加双向绑定 * docs: 组件Picker文档修改 * feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom * feat: imagepreview * fix: 组件imagepreview点击视频遮罩关闭(#1729) * fix: 解决 Picker 在微信小程序中无法使用问题 (#1774) * fix: 修改 Picker 组件 v-model 失效问题 * fix: 组件NoticeBar修改height之后，垂直轮播会卡顿 * fix: 删除Datepicker Demo演示多余内容 * fix: 组件Picker在JD小程序上适配 * fix: 组件Address京东小程序适配 * feat: 京东小程序适配 * fix: 删除空格 * feat: 删除console * fix: 京东小程序imagepreview适配 * fix: 修复 imagepreview 动态设置 initNo 显示不正确问题 * fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819 * fix: 删除pullrefresh * feat: 组件 imagepreview瘦身 * feat: 组件Picker 瘦身 * fix: address线上问题修改 * fix: 完善imagepreview * feat: 公共函数提取 * feat: 函数式改用 createComponent * fix: 文件回撤 * feat: 单元测试修改 * fix: 组件popover样式问题修改 * feat: 新增 clamp 函数 * fix: 组件Infiniteloading Review 内容修改 * fix: 组件Infiniteloading问题更新 * feat: getScrollTopRoot函数修改 * feat: 组件popover新增功能 * feat: 组件picker新增 showOkText/showCancelText
jdf2e · Dec 15, 2022 · abef536 · abef536
1 parent eaf379b
commit abef536
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 10 deletions.
diff --git a/src/packages/__VUE/picker/common.ts b/src/packages/__VUE/picker/common.ts
@@ -53,6 +53,14 @@ export const componentWeb = {
     swipeDuration: {
       type: [Number, String],
       default: 1000
+    },
+    showOkText: {
+      type: Boolean,
+      default: true
+    },
+    showCancelText: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],
@@ -159,6 +167,14 @@ export const componentWeapp = {
     swipeDuration: {
       type: [Number, String],
       default: 1000
+    },
+    showOkText: {
+      type: Boolean,
+      default: true
+    },
+    showCancelText: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],

diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
@@ -16,6 +16,7 @@
       :title="translate('chooseCity')"
       @change="change"
       @confirm="(options) => confirm('index', options)"
+      :showCancelText="false"
     ></nut-picker>
 
     <h2>{{ translate('defaultSelected') }}</h2>

diff --git a/src/packages/__VUE/picker/doc.en-US.md b/src/packages/__VUE/picker/doc.en-US.md
@@ -432,6 +432,8 @@ Slots are arranged at the bottom and top respectively for custom Settings
 | 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`     |
+| show-ok-text `v3.3.1`	| Is show confirm button          |	Boolean	|`true`     |
+| show-cancel-text `v3.3.1`	| Is show cancel button        |	Boolean	|`true`     |
 
 ### Data Structure of Columns
 

diff --git a/src/packages/__VUE/picker/doc.md b/src/packages/__VUE/picker/doc.md
@@ -429,6 +429,8 @@ Picker 组件在底部和顶部分别设置了插槽，可进行自定义设置
 | 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`     |
+| show-ok-text `v3.3.1`	| 是否展示确定按钮 |	Boolean	|`true`     |
+| show-cancel-text `v3.3.1`	| 是否展示取消按钮 |	Boolean	|`true`     |
 
 > 注：自 `v3.2.3` 起，在 @nutui/nutui-taro 中，取消 3D 展示效果，`three-dimensional` 废弃。
 ### Columns 数据结构

diff --git a/src/packages/__VUE/picker/index.scss b/src/packages/__VUE/picker/index.scss
@@ -34,13 +34,17 @@
 .nut-picker {
   // 标题
   &__bar {
-    display: flex;
+    position: relative;
     height: 56px;
-    align-items: center;
-    justify-content: space-between;
+    display: block;
+    text-align: center;
+    line-height: 56px;
   }
 
   &__left {
+    position: absolute;
+    left: 0;
+    top: 0;
     cursor: pointer;
     padding: $picker-bar-button-padding;
     display: flex;
@@ -52,6 +56,9 @@
     font-size: $picker-bar-cancel-font-size;
   }
   &__right {
+    position: absolute;
+    right: 0;
+    top: 0;
     cursor: pointer;
     padding: $picker-bar-button-padding;
     display: flex;
@@ -86,7 +93,6 @@
   }
 
   &__title {
-    flex: 1;
     @include oneline-ellipsis();
     text-align: center;
     color: $picker-bar-title-color;

diff --git a/src/packages/__VUE/picker/index.taro.vue b/src/packages/__VUE/picker/index.taro.vue
@@ -12,13 +12,16 @@
       :destroyOnClose="destroyOnClose"
     >
       <view class="nut-picker__bar">
-        <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="close">{{
+        <view class="nut-picker__cancel nut-picker__left nut-picker__button" @click="close" v-if="showCancelText">{{
           cancelText || translate('cancel')
         }}</view>
         <view class="nut-picker__title"> {{ title }}</view>
-        <view class="nut-picker__confirm nut-picker__right nut-picker__button" @click="confirmHandler()">{{
-          okText || translate('confirm')
-        }}</view>
+        <view
+          class="nut-picker__confirm nut-picker__right nut-picker__button"
+          @click="confirmHandler()"
+          v-if="showOkText"
+          >{{ okText || translate('confirm') }}</view
+        >
       </view>
       <slot name="top"></slot>
 

diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
@@ -13,9 +13,13 @@
       :destroyOnClose="destroyOnClose"
     >
       <view class="nut-picker__bar">
-        <view class="nut-picker__left" @click="close">{{ cancelText || translate('cancel') }}</view>
+        <view class="nut-picker__left" v-if="showCancelText" @click="close">{{
+          cancelText || translate('cancel')
+        }}</view>
         <view class="nut-picker__title"> {{ title }}</view>
-        <view class="nut-picker__right" @click="confirmHandler()">{{ okText || translate('confirm') }}</view>
+        <view class="nut-picker__right" v-if="showOkText" @click="confirmHandler()">{{
+          okText || translate('confirm')
+        }}</view>
       </view>
 
       <slot name="top"></slot>
@@ -100,6 +104,14 @@ export default create({
     swipeDuration: {
       type: [Number, String],
       default: 1000
+    },
+    showOkText: {
+      type: Boolean,
+      default: true
+    },
+    showCancelText: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['close', 'change', 'confirm', 'update:visible', 'update:modelValue'],

diff --git a/src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue b/src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue
@@ -18,6 +18,7 @@
       :safeAreaInsetBottom="true"
       @change="change"
       @confirm="(options) => confirm('index', options)"
+      :showCancelText="false"
     ></nut-picker>
 
     <h2>默认选中项</h2>