fix: 修复textbox输入时waring

src/packages/textbox/demo.vue

@@ -1,55 +1,61 @@
 <template>
-  <div class="textbox-demo">
-    <!-- <h4>示例</h4> -->
-    <h4>默认用法 支持异步回显数据</h4>
-    <nut-textbox v-model="val"></nut-textbox>
-    <h4>自定义高度:100px</h4>
-    <nut-textbox :txtAreaH="100" :maxNum="300" :value="val"></nut-textbox>
-
-    <h4>自定义提示语</h4>
-    <nut-textbox :placeText="'请填写详细情况请填写详细情况'"></nut-textbox>
-
-    <h4>自定义字数限制</h4>
-    <nut-textbox :maxNum="100"></nut-textbox>
-
-    <h4>限制字数不可超出</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef"></nut-textbox>
-
-    <h4>字数超出报错</h4>
-    <nut-textbox :maxNum="10" :txtAreaH="100" @errorFunc="overLength"></nut-textbox>
-
-    <h4>自定义文本框背景色</h4>
-    <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef"></nut-textbox>
-
-    <h4>不显示字数限制</h4>
-    <nut-textbox :limitShow="false" :maxNum="10"></nut-textbox>
-
-    <h4>输入回调返回文字</h4>
-    <nut-textbox :maxNum="10" txtAreaH="100" @inputFunc="inputText"></nut-textbox>
-  </div>
+    <div class="textbox-demo">
+        <!-- <h4>示例</h4> -->
+        <h4>默认用法 支持异步回显数据</h4>
+         <nut-textbox v-model="val"></nut-textbox>
+        <h4>自定义高度:100px</h4>
+        <nut-textbox :txtAreaH="100" :maxNum="300" v-model="val"></nut-textbox>
+
+        <h4>自定义提示语</h4>
+        <nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"></nut-textbox>
+        
+
+        <h4>自定义字数限制</h4>
+        <nut-textbox :maxNum="100" v-model="val2"></nut-textbox>
+        
+
+        <h4>限制字数不可超出</h4>
+        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#efefef"></nut-textbox>
+        
+
+        <h4>字数超出报错</h4>
+        <nut-textbox :maxNum="10" :txtAreaH="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>
+
+        <h4>不显示字数限制</h4>
+        <nut-textbox :limitShow="false" :maxNum="10" v-model="val1" ></nut-textbox>
+       
+        <h4>输入回调返回文字</h4>
+        <nut-textbox  :maxNum="10" txtAreaH="100" @inputFunc="inputText" ></nut-textbox>
+    </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      val: ''
-    };
-  },
-  methods: {
-    overLength() {
-      alert('字数超出');
+    data(){
+        return{
+            val: '',
+            val1:"",
+            val2:"自定义数据"
+        }
+    },
+    methods:{
+        overLength(){
+            alert("字数超出");
+        },
+        inputText(val){
+           alert(val);
+        }
     },
-    inputText(val) {
-      alert(val);
-    }
-  },
-  mounted() {
-    var that = this;
-    this.val = '初始测试数据';
-    setTimeout(function() {
-      that.val = '异步测试数据123';
-    }, 1000);
-  }
-};
+    mounted(){
+        var that=this;
+        this.val="初始测试数据"
+        setTimeout(function(){
+            that.val="异步测试数据123";
+        },1000)
+        }
+}
 </script>

src/packages/textbox/doc.md

@@ -17,19 +17,19 @@
 ## 自定义提示语
 
 ```html
-<nut-textbox :placeText="'请填写详细情况请填写详细情况'"> </nut-textbox>
+<nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"> </nut-textbox>
 ```
 
 ## 自定义字数限制
 
 ```html
-<nut-textbox :maxNum="100"> </nut-textbox>
+<nut-textbox :maxNum="100" v-model="val2"> </nut-textbox>
 ```
 
 ## 限制字数不可超出
 
 ```html
-<nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#efefef">
+<nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="2" textBgColor="#efefef" v-model="val2">
 </nut-textbox>
 ```
 
@@ -66,7 +66,9 @@
 export default {
   data() {
     return {
-      val: ''
+      val: '',
+      val1:'',
+      val2:'自定义数据'
     }
   },
   methods: {

src/packages/textbox/index.js

@@ -1,7 +1,7 @@
 import TextBox from './textbox.vue';
 import './textbox.scss';
 TextBox.install = function(Vue) {
-  Vue.component(TextBox.name, TextBox);
+    Vue.component(TextBox.name, TextBox);
 };
 
-export default TextBox;
+export default TextBox

src/packages/textbox/textbox.scss

@@ -1,34 +1,34 @@
-.nut-textbox {
-  background: #fff;
-  .txt-area {
-    border: 1px solid #ececee;
-    padding: 5px 20px 5px 10px;
-    position: relative;
-    &.num-none {
-      padding: 10px 20px;
+.nut-textbox{
+	background:#fff;
+    .txt-area{
+        border: 1px solid #ececee;
+	    padding: 5px 20px 5px 10px;;
+	    position: relative;
+        &.num-none{
+            padding:10px 20px;
+        }
+        textarea{
+            resize: none;
+		    width: 100%;
+		    border: none;
+		    outline: none;
+		    margin: 0;
+		    padding: 0;
+		    background: transparent;
+            display:block;
+        }
+        span{
+            color: #666;
+		    position: absolute;
+		    right: 10px;
+		    bottom: 5px;
+		    font-size:12px;
+        }
+        &.error{
+        	border:1px solid #e2231a;
+        	span{
+        		color:#e2231a;
+        	}
+        }
     }
-    textarea {
-      resize: none;
-      width: 100%;
-      border: none;
-      outline: none;
-      margin: 0;
-      padding: 0;
-      background: transparent;
-      display: block;
-    }
-    span {
-      color: #666;
-      position: absolute;
-      right: 10px;
-      bottom: 5px;
-      font-size: 12px;
-    }
-    &.error {
-      border: 1px solid #e2231a;
-      span {
-        color: #e2231a;
-      }
-    }
-  }
-}
+}

src/packages/textbox/textbox.vue

@@ -1,87 +1,90 @@
 <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="value"
-        @input="txtIptLength"
-        :switchMax="switchMax"
-        :maxlength="iptMaxlength"
-      ></textarea>
-      <span v-show="limitShow">{{ txtNum }}/{{ maxNum }}</span>
+    <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="currentValue" @input="txtIptLength" :switchMax="switchMax" :maxlength="iptMaxlength"></textarea>
+            <span v-show="limitShow">{{txtNum}}/{{maxNum}}</span>
+        </div>
     </div>
-  </div>
 </template>
 <script>
 export default {
-  name: 'nut-textbox',
-  props: {
-    value: {
-      type: String,
-      default: ''
+    name:'nut-textbox',
+    props: {
+        value: {
+            type: String,
+            default: ""
+        },
+    	maxNum:{
+    		type:[String,Number],
+    		default:50,
+    	},
+    	placeText:{
+    		type:String,
+    		default:'请您在此输入',
+    	},
+    	txtAreaH:{
+    		type:[String,Number],
+    		default:"50",
+    	},
+    	switchMax:{
+    		type:Boolean,
+    		default:false,
+    	},
+        textBgColor:{
+            type:String,
+            default:'#fff'
+        },
+        limitShow:{
+            type:Boolean,
+            default:true,
+        }
     },
-    maxNum: {
-      type: [String, Number],
-      default: 50
+    data() {
+        return {
+           
+            errorState:false,
+            txtNum:0,
+        };
     },
-    placeText: {
-      type: String,
-      default: '请您在此输入'
+    mounted(){
+       
     },
-    txtAreaH: {
-      type: [String, Number],
-      default: '50'
+    computed:{
+        currentValue:{
+            get(){
+                return this.value;
+            },
+            set(val){
+            }
+        },
+        txtAreaHeight:function(){
+           let txtAreaH;
+           txtAreaH = this.txtAreaH;
+                
+           return txtAreaH;
+        },
+        iptMaxlength(){
+        	let maxlength;
+        	if (this.switchMax) {
+        		maxlength = this.maxNum
+        	}
+        	return maxlength
+        },
     },
-    switchMax: {
-      type: Boolean,
-      default: false
-    },
-    textBgColor: {
-      type: String,
-      default: '#fff'
-    },
-    limitShow: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      errorState: false,
-      txtNum: 0
-    };
-  },
-  computed: {
-    txtAreaHeight: function() {
-      let txtAreaH;
-      txtAreaH = this.txtAreaH;
-
-      return txtAreaH;
-    },
-    iptMaxlength() {
-      let maxlength;
-      if (this.switchMax) {
-        maxlength = this.maxNum;
-      }
-      return maxlength;
-    }
-  },
-  methods: {
-    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', data);
-      this.$emit('input', data);
+    methods: {
+        txtIptLength(event){
+            const data = event.target.value
+            const txtLength = data.length;
+            this.txtNum = txtLength;
+            if(txtLength > this.maxNum) {
+                this.errorState = true;
+                this.$emit('errorFunc'); 
+           	}else{
+                this.errorState = false;
+           	}
+            this.$emit('inputFunc',data);
+            this.$emit('input',data);
+        }
     }
-  }
-};
-</script>
+}
+</script>