浏览代码

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

richard1015 4 年之前
父节点
当前提交
591e76de0a
共有 3 个文件被更改,包括 32 次插入20 次删除
  1. 4 2
      src/packages/__VUE/picker/demo.vue
  2. 16 14
      src/packages/__VUE/picker/doc.md
  3. 12 4
      src/packages/__VUE/picker/index.vue

+ 4 - 2
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"

+ 16 - 14
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          |
     

+ 12 - 4
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'],