Browse Source

fix: 优化textboxt

guoxiao 5 years ago
parent
commit
b4c1004608
2 changed files with 28 additions and 28 deletions
  1. 12 12
      src/packages/textbox/demo.vue
  2. 16 16
      src/packages/textbox/doc.md

+ 12 - 12
src/packages/textbox/demo.vue

@@ -6,28 +6,28 @@
     <h4>禁用</h4>
     <nut-textbox disabled v-model="val"></nut-textbox>
     <h4>自定义高度:100px</h4>
-    <nut-textbox :txtAreaH="100" :maxNum="300" v-model="val"></nut-textbox>
+    <nut-textbox :txtAreaH="100" :max-num="300" v-model="val"></nut-textbox>
 
     <h4>自定义提示语</h4>
-    <nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"></nut-textbox>
+    <nut-textbox :place-text="'请填写详细情况请填写详细情况'" v-model="val1"></nut-textbox>
 
     <h4>自定义字数限制</h4>
-    <nut-textbox :maxNum="100" v-model="val2"></nut-textbox>
+    <nut-textbox :max-num="100" v-model="val2"></nut-textbox>
 
     <h4>限制字数不可超出</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef" v-model="val3"></nut-textbox>
+    <nut-textbox :switch-max="true" :max-num="10" :txt-areaH="100" text-bgColor="#efefef" v-model="val3"></nut-textbox>
 
     <h4>字数超出报错</h4>
-    <nut-textbox :maxNum="10" :txtAreaH="100" @errorFunc="overLength" v-model="val1"></nut-textbox>
+    <nut-textbox :max-num="10" :txt-areaH="100" @errorFunc="overLength" v-model="val1"></nut-textbox>
 
     <h4>自定义文本框背景色</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef" v-model="val1"></nut-textbox>
+    <nut-textbox :switch-max="true" :max-num="10" :txt-areaH="100" text-bgColor="#feefef" v-model="val1"></nut-textbox>
 
     <h4>不显示字数限制</h4>
-    <nut-textbox :limitShow="false" :maxNum="10" v-model="val1"></nut-textbox>
+    <nut-textbox :limit-show="false" :max-num="10" v-model="val1"></nut-textbox>
 
     <h4>输入回调返回文字</h4>
-    <nut-textbox :maxNum="10" txtAreaH="100" @inputFunc="inputText"></nut-textbox>
+    <nut-textbox :max-num="10" txt-areaH="100" @inputFunc="inputText"></nut-textbox>
   </div>
 </template>
 
@@ -38,7 +38,7 @@ export default {
       val: '',
       val1: '',
       val2: '自定义数据',
-      val3: 'ceshi',
+      val3: 'ceshi'
     };
   },
   methods: {
@@ -47,15 +47,15 @@ export default {
     },
     inputText(val) {
       alert(val);
-    },
+    }
   },
   mounted() {
     var that = this;
     this.val = '初始测试数据';
-    setTimeout(function () {
+    setTimeout(function() {
       that.val = '异步测试数据123';
       that.val3 = '这是一段文字,非常长,非常长,非常长长长';
     }, 2000);
-  },
+  }
 };
 </script>

+ 16 - 16
src/packages/textbox/doc.md

@@ -16,32 +16,32 @@
 ## 自定义高度
 
 ```html
-<nut-textbox :txtAreaH="5" :maxNum="300"> </nut-textbox>
+<nut-textbox :txt-areaH="5" :max-num="300"> </nut-textbox>
 ```
 
 ## 自定义提示语
 
 ```html
-<nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"> </nut-textbox>
+<nut-textbox :place-text="'请填写详细情况请填写详细情况'" v-model="val1"> </nut-textbox>
 ```
 
 ## 自定义字数限制
 
 ```html
-<nut-textbox :maxNum="100" v-model="val2"> </nut-textbox>
+<nut-textbox :max-num="100" v-model="val2"> </nut-textbox>
 ```
 
 ## 限制字数不可超出
 
 ```html
-<nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef" v-model="val3"></nut-textbox>
+<nut-textbox :switch-max="true" :max-num="10" :txt-areaH="100" text-bgColor="#efefef" v-model="val3"></nut-textbox>
 
 ```
 
 ## 字数超出报错
 
 ```html
-<nut-textbox :maxNum="10" :txtAreaH="2" @errorFunc="overLength"> </nut-textbox>
+<nut-textbox :max-num="10" :txt-areaH="2" @errorFunc="overLength"> </nut-textbox>
 ```
 
 ## 自定义文本框背景色
@@ -49,22 +49,22 @@
 ```html
 <nut-textbox
   :switchMax="true"
-  :maxNum="10"
-  :txtAreaH="2"
-  textBgColor="#feefef"
+  :max-num="10"
+  :txt-areaH="2"
+  text-bgColor="#feefef"
 ></nut-textbox>
 ```
 
 ## 不显示字数限制
 
 ```html
-<nut-textbox :limitShow="false" :maxNum="10"></nut-textbox>
+<nut-textbox :limitShow="false" :max-num="10"></nut-textbox>
 ```
 
 ## 输入回调返回文字
 
 ```html
-<nut-textbox :maxNum="10" txtAreaH="2" @inputFunc="inputText"></nut-textbox>
+<nut-textbox :max-num="10" txt-areaH="2" @inputFunc="inputText"></nut-textbox>
 ```
 
 ```javascript
@@ -89,12 +89,12 @@ export default {
 | 字段        | 说明                                                        | 类型    | 默认值     |
 |-------------|-------------------------------------------------------------|---------|------------|
 | value       | 当前 input 值,可使用 v-model 双向绑定数据                  | String  | ''         |
-| txtAreaH    | 文本框高度                                                  | Number  | 1rem       |
-| placeText   | 自定义 placeholder 文案提示                                 | String  | 请您在此输 |
-| maxNum      | 最大字数                                                    | Number  | 50         |
-| switchMax   | 控制字数超出是否不可输入,注意:最大字数限制,请设置 maxNum | Boolean | false      |
-| textBgColor | 设置输入框背景色                                            | String  | #fff       |
-| limitShow   | 不显示字数限制                                              | Boolean | true       |
+| txt-areaH    | 文本框高度                                                  | Number  | 1rem       |
+| place-text   | 自定义 placeholder 文案提示                                 | String  | 请您在此输 |
+| max-num      | 最大字数                                                    | Number  | 50         |
+| switch-max   | 控制字数超出是否不可输入,注意:最大字数限制,请设置 maxNum | Boolean | false      |
+| text-bgColor | 设置输入框背景色                                            | String  | #fff       |
+| limit-show   | 不显示字数限制                                              | Boolean | true       |
 | disabled    | 是否禁用                                                    | Boolean | false      |
 
 ## Event