|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="nut-textbox">
|
|
<div class="nut-textbox">
|
|
|
<div class="txt-area" :class="{'error':errorState,'num-none':limitShow == false}" :style="{background:textBgColor}">
|
|
<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>
|
|
<span v-show="limitShow">{{txtNum}}/{{maxNum}}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -41,11 +41,22 @@ export default {
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+
|
|
|
errorState:false,
|
|
errorState:false,
|
|
|
txtNum:0,
|
|
txtNum:0,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ mounted(){
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
computed:{
|
|
computed:{
|
|
|
|
|
+ currentValue:{
|
|
|
|
|
+ get(){
|
|
|
|
|
+ return this.value;
|
|
|
|
|
+ },
|
|
|
|
|
+ set(val){
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
txtAreaHeight:function(){
|
|
txtAreaHeight:function(){
|
|
|
let txtAreaH;
|
|
let txtAreaH;
|
|
|
txtAreaH = this.txtAreaH;
|
|
txtAreaH = this.txtAreaH;
|
|
@@ -63,7 +74,6 @@ export default {
|
|
|
methods: {
|
|
methods: {
|
|
|
txtIptLength(event){
|
|
txtIptLength(event){
|
|
|
const data = event.target.value
|
|
const data = event.target.value
|
|
|
- console.log(data)
|
|
|
|
|
const txtLength = data.length;
|
|
const txtLength = data.length;
|
|
|
this.txtNum = txtLength;
|
|
this.txtNum = txtLength;
|
|
|
if(txtLength > this.maxNum) {
|
|
if(txtLength > this.maxNum) {
|