Browse Source

fix: field修复

guoxiaoxiao8 5 years ago
parent
commit
1f0516b298
3 changed files with 27 additions and 11 deletions
  1. 7 4
      src/packages/field/demo.vue
  2. 19 6
      src/packages/field/doc.md
  3. 1 1
      src/packages/field/field.vue

+ 7 - 4
src/packages/field/demo.vue

@@ -57,20 +57,20 @@
     </div> 
     <h4>文本域</h4>
       <div class="text-area">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
     </div> 
 
       <h4>事件</h4>
        <div>
       <nut-cell>
         <span slot="title">
-          <nut-field label="标题内容:" placeholder="请输入内容" v-model="val" @inputFunc="a" />
+          <nut-field label="标题内容:" placeholder="请输入内容" v-model="val" @inputFunc="fn" />
         </span>
       </nut-cell>
     </div>
       <h4>右侧自定义DOM</h4>
        <div class="filed-wrap"> 
-          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+          <nut-field label="验证码:" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
       </div>
@@ -110,9 +110,12 @@ export default {
     onBlur() {
       this.result = 'blur事件触发!';
     },
-    a(data){
+    fn(data){
       console.log(data)
     },
+    error(data){
+     // alert("文字超出限制了")
+    },
     checkVal5(data){
       if(!(/^1[3456789]\d{9}$/.test(data))){ 
        console.log(false)

+ 19 - 6
src/packages/field/doc.md

@@ -102,9 +102,22 @@
 
 | 字段  | 说明                                                                                     | 类型    | 默认值 |
 | ----- | ---------------------------------------------------------------------------------------- | ------- | ------ |
-| type  | 按钮类型,可选类型包含:空/bottom/red/gray/light/lightred/primary/default/actived/dashed | String  | -      |
-| block | 是否为通栏                                                                               | Boolean | false  |
-| size  | big /middle/small                                                                      | String  | big |
-| shape | 形状配置,可选类型:空、circle                                                           | String  | -      |
-| icon  | 按钮前的图标,参考Icon组件                                                               | String  | -      |
-| color | 自定义颜色,包含文字与图片颜色                                                           | String  | -      |
+| type  | 输入类型,包括 text,textarea, number,password| String  | text     |
+| label | 文字对齐方向       right ,left ,center            | Boolean | right  |
+| v-model  | value值                                                                    | String  | - |
+| placeholder | 文案为空时提示内容  | String  | -      |
+| disableClear  | 禁用clear 按钮                                                            | String  | -      |
+| readonly | 设置输入为只读                                                         | String  | -      |
+| disabled | 禁用输入框                                                        | String  | -      |
+| requireShow | 是否展示必填 *号                                                       | Boolean  | false    |
+| state |  状态,目前支持error                                                       | string  | -    |
+| maxLength | textArea时允许最大输入字数                      | String  | 50    |
+| limitShow | textArea时字数是否展示                     | Boolean  | true    |
+| rows | textArea时行数(可设置高度)                  | string  |1   |
+
+## Event
+
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| inputFunc | input事件 | data(输入的值)
+| change | change事件 | data(输入的值)

+ 1 - 1
src/packages/field/field.vue

@@ -126,7 +126,7 @@ export default {
       const data = event.target.value;
       const txtLength = data.length;
       this.txtNum = txtLength;
-      if (txtLength > this.maxLength) {
+      if (txtLength > this.maxLength*1) {
         this.$emit('errorFunc');
       } else {
       }