fix:修复textbox

src/packages/textbox/demo.vue

@@ -2,7 +2,7 @@
     <div>
         <h5>示例</h5>
         <h6>默认用法</h6>
-        <nut-textbox > </nut-textbox>
+         <nut-textbox v-model="val"></nut-textbox>
         <h6>自定义高度:100px</h6>
         <nut-textbox :txtAreaH="100" :maxNum="300"></nut-textbox>
 
@@ -37,7 +37,7 @@
 export default {
     data(){
         return{
-           
+            val: ''
         }
     },
     methods:{

src/packages/textbox/doc.md

@@ -3,88 +3,95 @@
 多行文本输入框，支持字数提示、字数限制等功能。
 
 ## 基本用法
+
 ```html
- <nut-textbox><nut-textbox/>
+<nut-textbox v-model="val"></nut-textbox>
 ```
+
 ## 自定义高度
+
 ```html
- <nut-textbox 
-    :txtAreaH="5" 
-    :maxNum="300">
-</nut-textbox>
+<nut-textbox :txtAreaH="5" :maxNum="300"> </nut-textbox>
 ```
+
 ## 自定义提示语
+
 ```html
-<nut-textbox 
-    :placeText="'请填写详细情况请填写详细情况'">
-</nut-textbox>
+<nut-textbox :placeText="'请填写详细情况请填写详细情况'"> </nut-textbox>
 ```
+
 ## 自定义字数限制
+
 ```html
-<nut-textbox 
-    :maxNum="100">
-</nut-textbox>
+<nut-textbox :maxNum="100"> </nut-textbox>
 ```
+
 ## 限制字数不可超出
+
 ```html
- <nut-textbox 
-    :switchMax="true" 
-    :maxNum="10" 
-    :txtAreaH="2" 
-    textBgColor="#efefef">
+<nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#efefef">
 </nut-textbox>
 ```
+
 ## 字数超出报错
+
 ```html
- <nut-textbox 
-    :maxNum="10" 
-    :txtAreaH="2" 
-     @errorFunc="overLength" >
-</nut-textbox>
+<nut-textbox :maxNum="10" :txtAreaH="2" @errorFunc="overLength"> </nut-textbox>
 ```
+
 ## 自定义文本框背景色
+
 ```html
- <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#feefef"></nut-textbox>
+<nut-textbox
+  :switchMax="true"
+  :maxNum="10"
+  :txtAreaH="2"
+  textBgColor="#feefef"
+></nut-textbox>
 ```
 
 ## 不显示字数限制
+
 ```html
-<nut-textbox :limitShow="false" :maxNum="10" ></nut-textbox>
+<nut-textbox :limitShow="false" :maxNum="10"></nut-textbox>
 ```
 
 ## 输入回调返回文字
+
 ```html
- <nut-textbox  :maxNum="10" txtAreaH="2" @inputFunc="inputText" ></nut-textbox>
+<nut-textbox :maxNum="10" txtAreaH="2" @inputFunc="inputText"></nut-textbox>
 ```
+
 ```javascript
 export default {
   data() {
     return {
-      val: ""
-    };
+      val: ''
+    }
   },
   methods: {
-     inputText(val){
-           alert(val);
-        }
+    inputText(val) {
+      alert(val)
+    }
   }
-};
+}
 ```
 
 ## Prop
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| txtAreaH | 文本框高度 | Number | 1rem
-| placeText | 自定义placeholder文案提示 | String | 请您在此输
-| maxNum | 最大字数 | Number | 50
-| switchMax | 控制字数超出是否不可输入，注意：最大字数限制，请设置maxNum | Boolean | false
-| textBgColor | 设置输入框背景色 | String | #fff
-| limitShow | 不显示字数限制 | Boolean | true
+| 字段        | 说明                                                        | 类型    | 默认值     |
+| ----------- | ----------------------------------------------------------- | ------- | ---------- |
+| value       | 当前 input 值，可使用 v-model 双向绑定数据                  | String  | ''         |
+| txtAreaH    | 文本框高度                                                  | Number  | 1rem       |
+| placeText   | 自定义 placeholder 文案提示                                 | String  | 请您在此输 |
+| maxNum      | 最大字数                                                    | Number  | 50         |
+| switchMax   | 控制字数超出是否不可输入，注意：最大字数限制，请设置 maxNum | Boolean | false      |
+| textBgColor | 设置输入框背景色                                            | String  | #fff       |
+| limitShow   | 不显示字数限制                                              | Boolean | true       |
 
 ## Event
 
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| errorFunc | 输入字数超过限定字数时触发事件 | -- 
-| inputText | 文字输入事件回调，默认传回输入文本 | --
+| 字段      | 说明                               | 回调参数 |
+| --------- | ---------------------------------- | -------- |
+| errorFunc | 输入字数超过限定字数时触发事件     | --       |
+| inputText | 文字输入事件回调，默认传回输入文本 | --       |

src/packages/textbox/textbox.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="nut-textbox">
         <div class="txt-area" :class="{'error':errorState,'num-none':limitShow == false}" :style="{background:textBgColor}">
-            <textarea :placeholder="placeText" :style="{height:txtAreaHeight+'px'}" v-model="textInfo" @input="txtIptLength" :switchMax="switchMax" :maxlength="iptMaxlength"></textarea>
+            <textarea :placeholder="placeText" :style="{height:txtAreaHeight+'px'}" v-model="text" @input="txtIptLength" :switchMax="switchMax" :maxlength="iptMaxlength"></textarea>
             <span v-show="limitShow">{{txtNum}}/{{maxNum}}</span>
         </div>
     </div>
@@ -10,6 +10,10 @@
 export default {
     name:'nut-textbox',
     props: {
+        value: {
+            type: String,
+            default: ""
+        },
     	maxNum:{
     		type:[String,Number],
     		default:50,
@@ -38,7 +42,7 @@ export default {
     },
     data() {
         return {
-        	textInfo:'',
+            text: '',
             errorState:false,
             txtNum:0,
         };
@@ -58,18 +62,24 @@ export default {
         	return maxlength
         },
     },
+    mounted() {
+        this.text = this.value
+    },
     methods: {
-        txtIptLength(){
-            let txtVal = this.textInfo.length;
-            this.txtNum = txtVal;  
-            if(txtVal > this.maxNum) {
+        txtIptLength(event){
+            const data = event.target.value
+            console.log(data)
+            const txtLength = data.length;
+            this.txtNum = txtLength;
+            if(txtLength > this.maxNum) {
                 this.errorState = true;
                 this.$emit('errorFunc'); 
            	}else{
                 this.errorState = false;
            	}
-            this.$emit('inputFunc',this.textInfo);
+            this.$emit('inputFunc',data);
+            this.$emit('input',data);
         }
     }
 }
-</script>
+</script>