feat(picker): Add confirmtext a props

Add confirmtext a props for the picker
hellof2e · Nov 8, 2022 · f751e1b · f751e1b
1 parent 8701741
commit f751e1b
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/packages/quark/src/picker/demo.vue b/packages/quark/src/picker/demo.vue
@@ -13,6 +13,7 @@
       :open="open"
       @close="close(0)"
       :title="translate('selectedTime')"
+      :confirmtext="translate('confirmText')"
       @confirm="confirm"
       ref="pickerRef"
       @change="change"
@@ -65,6 +66,7 @@ export default createDemo({
           basic: "基础使用",
           head: "自定义头部",
           selectedTime: "请选择时间",
+          confirmText: "确认",
           custom: {
             cancel: "取消",
             confirm: "确定",
@@ -77,6 +79,7 @@ export default createDemo({
         "en-US": {
           basic: "Basic Usage",
           head: "Custom head",
+          confirmText: "Confirm",
           selectedTime: "Please select Time",
           custom: {
             cancel: "Cancel",

diff --git a/packages/quark/src/picker/doc-react.en-US.md b/packages/quark/src/picker/doc-react.en-US.md
@@ -147,6 +147,7 @@ export default () => {
 |--------------|----------------------------------|--------|------------------|
 | open  | Whether to show picker  | `boolean`  | `require`
 | title | Title | `string`  | - |
+| confirmtext      | Text of the ok button           | `string` | `Confirm`
 | bottomhidden  | Whether to show bottom button (use with custom header)  | `boolean` | `false`
 | onClose | Emitted when click mask or cancel button. | `() => void`    |  `require ` |
 | onConfirm | Emitted when click confirm button.  |  `（e: {detail:{value: SelectColumn[]}}）=> void`   | `require` |

diff --git a/packages/quark/src/picker/doc-react.zh-CN.md b/packages/quark/src/picker/doc-react.zh-CN.md
@@ -147,6 +147,7 @@ export default () => {
 |--------------|----------------------------------|--------|------------------|
 | open        | picker是否显示 | `boolean`             | `require`
 | title       | 标题 | `string `                 | 
+| confirmtext      | 确定按钮的文字           | `string` | `确认`
 | bottomhidden | 是否隐藏底部按钮（通常配合自定义头部使用）           | `boolean` | `false`
 | onClose         | 点击遮罩或者取消按钮 |      `() => void`    |  `require ` |
 | onConfirm         | 确定按钮点击回调 |      `（e: {detail:{value: SelectColumn[]}}）=> void`   | `require` |

diff --git a/packages/quark/src/picker/doc.en-US.md b/packages/quark/src/picker/doc.en-US.md
@@ -142,6 +142,7 @@ export default {
 |--------------|----------------------------------|--------|------------------|
 | open         | Whether to show picker	 | `boolean`  | `require`
 | title        | Title | `string` | - |
+| confirmtext      | Text of the ok button           | `string` | `Confirm`
 | bottomhidden | Whether to show bottom button (use with custom header)  | `boolean` | `false`
 
 ### Events

diff --git a/packages/quark/src/picker/doc.zh-CN.md b/packages/quark/src/picker/doc.zh-CN.md
@@ -142,6 +142,7 @@ export default {
 |--------------|----------------------------------|--------|------------------|
 | open        | picker是否显示 |` boolean `                 | `require`
 | title    | 标题 | `string `                 | |
+| confirmtext      | 确定按钮的文字           | `string` | `确认`
 | bottomhidden      | 是否隐藏底部按钮（通常配合自定义头部使用）           | `boolean` | `false`
 
 

diff --git a/packages/quark/src/picker/index.tsx b/packages/quark/src/picker/index.tsx
@@ -22,6 +22,7 @@ export interface SelectColumn {
 export interface Props {
   open: boolean;
   title?: string;
+  confirmtext?: string;
   bottomhidden?: boolean;
 }
 export interface CustomEvent {
@@ -53,6 +54,9 @@ class QuarkPicker extends QuarkElement {
   @property()
   title = "";
 
+  @property()
+  confirmtext = "";
+
   @property({ type: Boolean })
   bottomhidden = false;
 
@@ -195,7 +199,7 @@ class QuarkPicker extends QuarkElement {
           {!this.bottomhidden && (
             <div class="quark-picker-bottom">
               <quark-button type="primary" onclick={this.confirm}>
-                {Locale.current.confirm}
+                {this.confirmtext || Locale.current.confirm}
               </quark-button>
             </div>
           )}