fix: 修复filed样式，添加textArea高度自适应

src/packages/field/demo.vue

@@ -1,75 +1,52 @@
 <template>
   <div class="textinput-demo">
     <h4>标准样式</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo"> 
+      <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" />
     </div>
     <h4>文字左对齐，且不展示 清除 按钮</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field :disableClear="true" v-model="val2"  label="文本左对齐：" textAlign="left" placeholder="请输入内容" />  
     </div> 
      <h4>标题超出长度限制</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field  v-model="val2"  label="标题长度超出超出超出范围：" textAlign="right" placeholder="请输入内容" /> 
     </div> 
      <h4>数字</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+      <nut-field  v-model="val4"  label="请输入数字"  type="number"  />
     </div> 
-        <h4>错误验证</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @inputFunc="checkVal5" />
-        </span>
-      </nut-cell>
+    <h4>错误验证</h4>
+    <div class="filed-demo">
+        <nut-field  v-model="val5" :state="state"  :requireShow="true" label="手机号码"  @inputFunc="checkVal5" />
     </div> 
      <h4>禁用输入框</h4>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-field  v-model="val6"  :readonly="true" label="标题内容"   />
-        </span>
-      </nut-cell>
+    <div class="filed-demo">
+        <nut-field  v-model="val6"  :readonly="true" label="标题内容"   /> 
     </div> 
-    <div>
-      <nut-cell >
-        <span slot="title">
-          <nut-field  v-model="val7" :disabled="true"  label="标题内容"   />
-        </span>
-      </nut-cell>
-    </div> 
-    <h4>文本域</h4>
-      <div class="text-area">
-          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
+    <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> 
+
+    <h4>文本域(显示字数统计)</h4>
+      <div class="filed-demo">
+          <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val4"  type="textarea" @errorFunc="error" maxLength="20" rows="4"  />
+      </div> 
 
-      <h4>事件</h4>
+      <h4>事件输入事件</h4>
        <div>
       <nut-cell>
         <span slot="title">
-          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @inputFunc="fn" />
+          <nut-field label="标题内容：" placeholder="请输入内容" v-model="val" @input-func="fn" />
         </span>
       </nut-cell>
     </div>
       <h4>右侧自定义DOM</h4>
-       <div class="filed-wrap"> 
+       <div class="filed-demo"> 
           <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="fn" > 
               <div class="get-code"> 获取验证码</div>
           </nut-field>
@@ -132,13 +109,12 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scope>
 .demo {
 	padding: 0;
 }
-
-.textinput-demo > div {
-	width: 100%;
+h4{
+  margin-left: 10px;
 }
 
 .text-area {
@@ -149,16 +125,22 @@ export default {
 .wrapper-cell .nut-cell {
 	margin: 0 0 0 20px;
 }
-
-.filed-wrap {
-	background: #fff;
-
-	.get-code {
+.filed-demo{
+  width: 100vw;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: #fff;
+  padding: 5px 20px 5px 20px ;
+  	.get-code {
 		min-width: 80px;
 		background-color: #07c160;
 		border: 1px solid #07c160;
 		color: #fff;
-		margin: 10px;
+		margin: 10px 0;
 	}
 }
+.line{
+  border-top: 1px solid rgba(230,230,230,1) ;
+}
+
 </style>

src/packages/field/doc.md

@@ -39,7 +39,6 @@
 
 ```
 
-
 错误提示
 
 ```html
@@ -114,10 +113,10 @@
 | maxLength | textArea时允许最大输入字数                      | String  | 50    |
 | limitShow | textArea时字数是否展示                     | Boolean  | true    |
 | rows | textArea时行数(可设置高度)                  | string  |1   |
-
+| autosize | textArea时高度可以自适应                  | Boolean  | false  |
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| inputFunc | input事件 | data(输入的值)
+| input-func | input事件 | data(输入的值)
 | change | change事件 | data(输入的值)

src/packages/field/field.scss

@@ -1,125 +1,116 @@
 .nut-field {
-	display: flex;
-	box-sizing: border-box;
-	// flex-wrap: wrap;
-	align-items: center;
-	position: relative;
-	overflow: hidden;
-
-	.nut-require {
-		color: #ee0a24;
-		margin-right: 5px;
-	}
-
-	.nut-field-label {
-		display: inline-block;
-		margin-right: 20px;
-		max-width: 120px;
-		overflow: hidden;
-		font-size: 16px;
-		color: rgba(100, 100, 100, 1);
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	input {
-		min-width: 100px;
-		flex: 1;
-		height: 40px;
-		appearance: none;
-		font-size: 14px;
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: none;
-		background-color: '#FFFFFF';
-		padding: 0 25px 0 10px;
-
-		&::-webkit-input-placeholder {
-			color: #c1c4cb;
-			font-style: normal;
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-	}
-
-	.nut-text-core {
-		flex: 1;
-		padding: 5px 15px 5px 0;
-		appearance: none;
-		font-size: 14px;
-		box-sizing: border-box;
-		border-radius: 4px;
-		border: none;
-		background-color: '#FFFFFF';
-
-		&::-webkit-input-placeholder {
-			color: #c1c4cb;
-			font-style: normal;
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-
-		textarea {
-			width: 100%;
-			border: none;
-			outline: none;
-			margin: 0;
-			padding: 0;
-			background: transparent;
-			display: block;
-		}
-
-		span {
-			float: right;
-			margin-right: 15px;
-		}
-	}
-
-	.nut-textinput-clear {
-		opacity: 0.5;
-		position: relative;
-		right: 20px;
-		top: 10px;
-		transform: translateY(-50%);
-		height: 20px;
-		width: 20px;
-
-		svg {
-			vertical-align: top;
-			fill: #999;
-		}
-	}
-
-	.nut-field-error {
-		width: 100%;
-		height: 5px;
-		border-bottom: 1px solid red;
-		box-sizing: border-box;
-		position: absolute;
-		bottom: 0;
-	}
-
-	.input-error {
-		color: red;
-	}
+    display: flex;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    .nut-require {
+        color: #ee0a24;
+        margin-right: 5px;
+    }
+    .nut-field-label {
+        display: inline-block;
+        margin-right: 20px;
+        max-width: 120px;
+        overflow: hidden;
+        font-size: 16px;
+        color: rgba(100, 100, 100, 1);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        line-height: 40px;
+    }
+    input {
+        min-width: 100px;
+        flex: 1;
+        height: 40px;
+        appearance: none;
+        font-size: 16px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        padding: 0 25px 0 10px;
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+    .nut-text-core {
+        flex: 1;
+        padding: 5px 15px 5px 0;
+        appearance: none;
+        font-size: 14px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        border: none;
+        background-color: '#FFFFFF';
+        &::-webkit-input-placeholder {
+            color: #c1c4cb;
+            font-style: normal;
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+        textarea {
+            width: 100%;
+            border: none;
+            outline: none;
+            margin: 5px 0 0 0;
+            padding: 0;
+            background: transparent;
+            display: block;
+            font-size: 16px;
+            font-family: PingFangSC-Regular;
+            font-size: 16px;
+            color: rgba(50, 50, 50, 1);
+        }
+        span {
+            float: right;
+            margin-right: 15px;
+        }
+    }
+    .nut-textinput-clear {
+        opacity: 0.5;
+        position: relative;
+        right: 20px;
+        top: 20px;
+        transform: translateY(-50%);
+        height: 20px;
+        width: 20px;
+        svg {
+            vertical-align: top;
+            fill: #999;
+        }
+    }
+    .nut-field-error {
+        width: 100%;
+        height: 5px;
+        border-bottom: 1px solid red;
+        box-sizing: border-box;
+        position: absolute;
+        bottom: 0;
+    }
+    .input-error {
+        color: red;
+    }
 }
 
 .nut-filed-disabled {
-	input {
-		background-color: #f5f7fa;
-		border-color: #e5e7ed;
-		color: #999;
-
-		&::-webkit-input-placeholder {
-			color: hsl(225, 10%, 84%);
-		}
-
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-	}
+    input {
+        color: rgba(200, 200, 200, 1);
+        background-color: #ffffff;
+        &::-webkit-input-placeholder {
+            color: hsl(225, 10%, 84%);
+        }
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
 }
+
+input:focus,
+select:focus {
+    outline: none;
+}

src/packages/field/field.vue

@@ -97,10 +97,17 @@ export default {
        type: Boolean,
         default:false
     },
+    autosize:{
+       type: Boolean,
+        default:false
+    },
     value: String
   },
   mounted(){
     this.txtNum=this.value.length;
+    if(this.limitShow==false){
+      this.maxLength="";
+    }
   },
   methods: {
     initCssStyle(){
@@ -115,7 +122,7 @@ export default {
     },
     handleInput(evt) {
       this.currentValue = evt.target.value;
-       this.$emit('inputFunc', evt.target.value);
+       this.$emit('input-func', evt.target.value);
        this.$emit('input', evt.target.value);
     },
     handleClear() {
@@ -130,7 +137,14 @@ export default {
         this.$emit('errorFunc');
       } else {
       }
-      this.$emit('inputFunc', data);
+      if(this.autosize){
+        
+        let height = this.$refs.textarea.scrollHeight;
+         if (height) {
+       this.$refs.textarea.style.height = height + 'px';
+      }
+      }
+      this.$emit('input-func', data);
       this.$emit('input', data);
     }
   },