feat(picker): “确定”和“取消”按钮文字自定义 #439

jdf2e · Jun 3, 2021 · 591e76d · 591e76d
1 parent c88da36
commit 591e76d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/src/packages/__VUE/picker/demo.vue b/src/packages/__VUE/picker/demo.vue
@@ -13,14 +13,16 @@
       title="城市选择"
       @confirm="confirm"
       @close="close"
-    ></nut-picker>
+    >
+    </nut-picker>
     <nut-picker
       v-model:visible="show2"
       :list-data="listData2"
       title="多列选择"
       @confirm="confirm2"
       @close="close"
-    ></nut-picker>
+    >
+    </nut-picker>
     <nut-picker
       v-model:visible="show3"
       :list-data="listData3"

diff --git a/src/packages/__VUE/picker/doc.md b/src/packages/__VUE/picker/doc.md
@@ -160,21 +160,23 @@ export default createDemo({
 
 ### Props
 
-| 参数         | 说明                             | 类型   | 默认值           |
-|--------------|----------------------------------|--------|------------------|
-| v-model:visible   | 是否可见               | Boolean | false             |
-| title        | 设置标题                         | String | -                |
-| list-data         | 列表数据 | Array | -                |
-| default-value-index         | 初始选中项的索引，默认为 0 | number | 0                |
-| teleport               | 指定挂载节点                          | String  | "body"   |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                | Boolean | false    |
-| lock-scroll            | 背景是否锁定                          | Boolean | false    |
+| 参数                   | 说明                       | 类型    | 默认值 |
+|------------------------|----------------------------|---------|--------|
+| v-model:visible        | 是否可见                   | Boolean | false  |
+| title                  | 设置标题                   | String  | -      |
+| cancel-text            | 取消按钮文案               | String  | 取消   |
+| ok-text                | 确定按钮文案               | String  | 确定   |
+| list-data              | 列表数据                   | Array   | -      |
+| default-value-index    | 初始选中项的索引，默认为 0 | number  | 0      |
+| teleport               | 指定挂载节点               | String  | "body" |
+| close-on-click-overlay | 点击蒙层是否关闭对话框     | Boolean | false  |
+| lock-scroll            | 背景是否锁定               | Boolean | false  |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| close  | 关闭弹窗时触发  | event: Event |
-| confirm  | 点击确认时候触发  | event: Event |
-| change  | 改变时触发  | val |
+| 事件名  | 说明             | 回调参数     |
+|---------|------------------|--------------|
+| close   | 关闭弹窗时触发   | event: Event |
+| confirm | 点击确认时候触发 | event: Event |
+| change  | 改变时触发       | val          |
 
diff --git a/src/packages/__VUE/picker/index.vue b/src/packages/__VUE/picker/index.vue
@@ -10,11 +10,11 @@
       @close="close"
     >
       <view class="nut-picker__bar">
-        <view class="nut-picker__left nut-picker__button" @click="close"
-          >取消</view
-        >
+        <view class="nut-picker__left nut-picker__button" @click="close">{{
+          cancelText
+        }}</view>
         <view> {{ title }}</view>
-        <view class="nut-picker__button" @click="confirm()">确定</view>
+        <view class="nut-picker__button" @click="confirm()">{{ okText }}</view>
       </view>
 
       <view class="nut-picker__column">
@@ -71,6 +71,14 @@ export default create({
       type: String,
       default: ''
     },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    okText: {
+      type: String,
+      default: '确定'
+    },
     ...commonProps
   },
   emits: ['close', 'change', 'confirm', 'update:visible'],