Browse Source

fix:修复text输入时候报waring

guoxiaoxiao8 5 years ago
parent
commit
30a4233d53
3 changed files with 27 additions and 13 deletions
  1. 9 7
      src/packages/textbox/demo.vue
  2. 6 4
      src/packages/textbox/doc.md
  3. 12 2
      src/packages/textbox/textbox.vue

+ 9 - 7
src/packages/textbox/demo.vue

@@ -4,14 +4,14 @@
         <h4>默认用法 支持异步回显数据</h4>
          <nut-textbox v-model="val"></nut-textbox>
         <h4>自定义高度:100px</h4>
-        <nut-textbox :txtAreaH="100" :maxNum="300" :value="val"></nut-textbox>
+        <nut-textbox :txtAreaH="100" :maxNum="300" v-model="val"></nut-textbox>
 
         <h4>自定义提示语</h4>
-        <nut-textbox :placeText="'请填写详细情况请填写详细情况'"></nut-textbox>
+        <nut-textbox :placeText="'请填写详细情况请填写详细情况'" v-model="val1"></nut-textbox>
         
 
         <h4>自定义字数限制</h4>
-        <nut-textbox :maxNum="100"></nut-textbox>
+        <nut-textbox :maxNum="100" v-model="val2"></nut-textbox>
         
 
         <h4>限制字数不可超出</h4>
@@ -19,14 +19,14 @@
         
 
         <h4>字数超出报错</h4>
-        <nut-textbox :maxNum="10" :txtAreaH="100"  @errorFunc="overLength" ></nut-textbox>
+        <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"></nut-textbox>
+        <nut-textbox :switchMax="true" :maxNum="10" :txtAreaH="100" textBgColor="#feefef" v-model="val1"></nut-textbox>
 
         <h4>不显示字数限制</h4>
-        <nut-textbox :limitShow="false" :maxNum="10" ></nut-textbox>
+        <nut-textbox :limitShow="false" :maxNum="10" v-model="val1" ></nut-textbox>
        
         <h4>输入回调返回文字</h4>
         <nut-textbox  :maxNum="10" txtAreaH="100" @inputFunc="inputText" ></nut-textbox>
@@ -37,7 +37,9 @@
 export default {
     data(){
         return{
-            val: ''
+            val: '',
+            val1:"",
+            val2:"自定义数据"
         }
     },
     methods:{

+ 6 - 4
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: {

+ 12 - 2
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="value" @input="txtIptLength" :switchMax="switchMax" :maxlength="iptMaxlength"></textarea>
+            <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>
@@ -41,11 +41,22 @@ export default {
     },
     data() {
         return {
+           
             errorState:false,
             txtNum:0,
         };
     },
+    mounted(){
+       
+    },
     computed:{
+        currentValue:{
+            get(){
+                return this.value;
+            },
+            set(val){
+            }
+        },
         txtAreaHeight:function(){
            let txtAreaH;
            txtAreaH = this.txtAreaH;
@@ -63,7 +74,6 @@ export default {
     methods: {
         txtIptLength(event){
             const data = event.target.value
-            console.log(data)
             const txtLength = data.length;
             this.txtNum = txtLength;
             if(txtLength > this.maxNum) {