fix: field样式修复

src/packages/field/demo.vue

@@ -1,53 +1,47 @@
 <template>
   <div class="textinput-demo">
     <h4>标准样式</h4>
-    <div class="filed-demo"> 
+   
       <nut-field label="标题内容" placeholder="请输入内容" v-model="val" />
-    </div>
-    <h4>文字左对齐，且不展示 清除 按钮</h4>
-    <div class="filed-demo">
+ 
+    <h4>文字左对齐，且不展示清除按钮 </h4> 
+
       <nut-field :disableClear="true" v-model="val2"  label="文本左对齐" textAlign="left" placeholder="请输入内容" />  
-    </div> 
+   
      <h4>标题超出长度限制</h4>
-    <div class="filed-demo">
+    
       <nut-field  v-model="val2"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
-    </div> 
+   
      <h4>数字</h4>
-    <div class="filed-demo">
-      <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
-    </div> 
+    
+      <nut-field  v-model="val4"  label="请输入数字"  type="number" placeholder="请输入数字" />
+   
     <h4>错误验证</h4>
-    <div class="filed-demo">
-        <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @inputFunc="checkVal5" />
-    </div> 
+    
+        <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @input-func="checkVal5" />
+   
      <h4>禁用输入框</h4>
-    <div class="filed-demo">
+    
         <nut-field  v-model="val6"  :readonly="true" label="标题内容"   /> 
-    </div> 
-    <div class="filed-demo line">
+   
+       <div class="filed-demo line">
         <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
-    </div> 
+   
      <h4>文本域(不限制字数,高度自适应)</h4>
-      <div class="filed-demo">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  :autosize="true" :limitShow="false" type="textarea" @errorFunc="error"  />
-      </div> 
+      
+          <nut-field  label="标题内容" placeholder="自我介绍" v-model="val3"  :autosize="true" :limitShow="false" type="textarea" @errorFunc="error"  />
+     
 
     <h4>文本域(显示字数统计)</h4>
-      <div class="filed-demo">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val4"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
-      </div> 
-
+      
+          <nut-field  label="意见反馈" placeholder="自我介绍" v-model="val4"  type="textarea" @errorFunc="error" maxLength="200" rows="4"  />
+     
       <h4>事件输入事件</h4>
-       <div>
-      <nut-cell>
-        <span slot="title">
+
           <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @input-func="fn" />
-        </span>
-      </nut-cell>
-    </div>
-      <h4>右侧自定义DOM</h4>
-       <div class="filed-demo"> 
-          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="fn" > 
+
+      <h4>右侧自定义DOM</h4>    
+          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @input-func="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
       </div>
@@ -73,12 +67,6 @@ export default {
   },
 
   mounted() {
-    const th = this;
-    this.$nextTick(function() {
-      setTimeout(function() {
-        th.$refs.myInput.focus();
-      }, 2000);
-    });
   },
   methods: {
     onFocus() {
@@ -125,18 +113,13 @@ h4{
 .wrapper-cell .nut-cell {
 	margin: 0 0 0 20px;
 }
-.filed-demo{
-  width: 100vw;
-  box-sizing: border-box; 
-  background-color: #fff;
-  padding: 5px 20px 5px 20px ;
-  	.get-code {
+.get-code {
 		min-width: 80px;
 		background-color: #07c160;
 		border: 1px solid #07c160;
 		color: #fff;
-		margin: 10px 0;
-	}
+    margin: 10px 0;
+    padding: 0 5px;
 }
 .line{
   border-top: 1px solid rgba(230,230,230,1) ;

src/packages/field/doc.md

@@ -4,49 +4,30 @@
 
 标准样式
 ```html
-    <nut-cell>
-        <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
-        </span>
-      </nut-cell>
+    <nut-field label="标题内容" placeholder="请输入内容" v-model="val" />
 ```
 
 文字左对齐，且不展示清除按钮
 ```html
-    <nut-cell>
-        <span slot="title">
-          <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+     <nut-field :disableClear="true" v-model="val2"  label="文本左对齐" textAlign="left" placeholder="请输入内容" />  
 ```
 
 标题超出范围展示
 ```html
-   <span slot="title">
-          <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+    <nut-field  v-model="val2"  label="标题长度超出超出超出范围" textAlign="right" placeholder="请输入内容" /> 
 ```
 
 只输入数字
 
 ```html
- <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
-        </span>
-  </nut-cell>
+ <nut-field  v-model="val4"  label="请输入数字"  type="number" placeholder="请输入数字" />
 
 ```
 
 错误提示
 
 ```html
- <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"   />
-        </span>
-      </nut-cell>
+ <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @input-func="checkVal5" />
 ```
 ```javascript
  export default {
@@ -56,43 +37,61 @@
       state:"error"
     };
   },
+  methods:{
+    checkVal5(data){
+      if(!(/^1[3456789]\d{9}$/.test(data))){ 
+       console.log(false)
+       this.state="error";
+      } else{
+         console.log(true)
+        this.state="";
+      }
+    },
+  }
 
 };
 ```
 禁用输入框
 
 ```html
- <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val6"  :readonly="true" label="标题内容"   />
-        </span>
-      </nut-cell>
-    </div> 
-    <div>
-      <nut-cell >
-        <span slot="title">
-          <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
-        </span>
-      </nut-cell>
-    </div> 
+ <nut-field  v-model="val6"  :readonly="true" label="标题内容"   /> 
+   
+ <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
 ```
 
-文本域
+文本域(不限制字数,高度自适应)
 
 ```html
-<div class="text-area">
-    <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
-</div> 
+ <nut-field  
+    label="标题内容" 
+    placeholder="自我介绍" 
+    v-model="val3"  
+    :autosize="true" 
+    :limitShow="false" 
+    type="textarea" />
+ 
 ```
+文本域(显示字数统计)
+
+```html
+ <nut-field  
+    label="意见反馈" 
+    placeholder="自我介绍" 
+    v-model="val4" 
+     type="textarea" 
+     @error-func="error" 
+     maxLength="200" rows="4"  />
+  
+ 
+```
+
 右侧自定义demo
 
 ```html
-<div class="filed-wrap"> 
-          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
-              <div class="get-code"> 获取验证码</div>
-          </nut-field>
-      </div>
+  <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+    <div class="get-code"> 获取验证码</div>
+  </nut-field>
+
 ```
 
 
@@ -119,4 +118,5 @@
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
 | input-func | input事件 | data(输入的值)
+| error-func | 文本域数字超出范围提示 | data(输入的值)
 | change | change事件 | data(输入的值)

src/packages/field/field.scss

@@ -1,7 +1,11 @@
 .nut-field {
     display: flex;
-    box-sizing: border-box;
     position: relative;
+    box-sizing: border-box;
+    width: 100vw;
+    box-sizing: border-box;
+    background-color: #fff;
+    padding: 5px 20px 5px 20px;
     .nut-require {
         color: #ee0a24;
         margin-right: 5px;
@@ -28,7 +32,7 @@
         border-radius: 4px;
         border: none;
         background-color: '#FFFFFF';
-        padding: 0 25px 0 10px;
+        padding: 0 8px 0 10px;
         &::-webkit-input-placeholder {
             color: #c1c4cb;
             font-style: normal;
@@ -39,13 +43,16 @@
     }
     .nut-text-core {
         flex: 1;
-        padding: 4px 15px 5px 0;
+        padding: 4px 0px 5px 0;
         appearance: none;
         font-size: 14px;
         box-sizing: border-box;
         border-radius: 4px;
         border: none;
         background-color: '#FFFFFF';
+        .nut-field-over {
+            color: rgba(225, 37, 27, 1);
+        }
         &::-webkit-input-placeholder {
             color: #c1c4cb;
             font-style: normal;
@@ -64,18 +71,25 @@
             font-size: 16px;
             font-family: PingFangSC-Regular;
             font-size: 16px;
+            resize: none;
             color: rgba(50, 50, 50, 1);
+            &::-webkit-input-placeholder {
+                color: #c1c4cb;
+                font-style: normal;
+            }
+            &::-webkit-search-cancel-button {
+                display: none;
+            }
         }
-        span {
+        .nut-text-limit {
             float: right;
-            margin-right: 15px;
+            margin-right: 0px;
             color: #969696;
         }
     }
     .nut-textinput-clear {
         opacity: 0.5;
         position: relative;
-        right: 20px;
         top: 20px;
         transform: translateY(-50%);
         height: 20px;
@@ -86,12 +100,12 @@
         }
     }
     .nut-field-error {
-        width: 100%;
+        width: 90%;
         height: 5px;
+        position: absolute;
+        bottom: 0px;
         border-bottom: 1px solid red;
         box-sizing: border-box;
-        position: absolute;
-        bottom: -3px;
     }
     .input-error {
         color: red;

src/packages/field/field.vue

@@ -3,7 +3,7 @@
     <span class="nut-require" v-if="requireShow">*</span>
     <span class="nut-field-label" v-if="label">{{ label }}</span>
 
-         <div  v-if="type === 'textarea'"  class="nut-text-core">
+    <div  v-if="type === 'textarea'"  class="nut-text-core">
           <textarea
             @change="$emit('change', currentValue)"
             ref="textarea"
@@ -15,7 +15,7 @@
             @input="txtIptLength"
             v-model="currentValue">
           </textarea>
-          <span  v-if="limitShow">{{ txtNum }}/{{ maxLength }}</span>
+          <span class="nut-text-limit"  v-if="limitShow"><span :class="[ { 'nut-field-over': overLmitNumber }]">{{txtNum}}</span>/{{ maxLength }}</span>
     </div>
      <input
      :class="['input-'+state]"
@@ -60,6 +60,7 @@ export default {
     return {
       active: false,
       txtNum:0,
+      overLmitNumber:false,
       currentValue: this.value
     };
   },
@@ -78,7 +79,7 @@ export default {
     },
     maxLength:{
       type:String,
-      default:"50"
+      default:""
     },
     state: {
         type:String,
@@ -133,10 +134,13 @@ export default {
       const data = event.target.value;
       const txtLength = data.length;
       this.txtNum = txtLength;
-      if (txtLength > this.maxLength*1) {
-        this.$toast.text(`最多可输入${this.maxLength}字`)
-        this.$emit('errorFunc');
+      console.log(txtLength,this.maxLength)
+      if (txtLength >= this.maxLength*1) {
+        this.overLmitNumber=true;
+        this.$toast.text(`已经输入${this.maxLength}字`)
+        this.$emit('error-func');
       } else {
+        this.overLmitNumber=false;
       }
       if(this.autosize){