Vue textarea限制输入字数
<div class="common_title">退款说明 <span>(选填)</span></div><div class="tk_text"><textarea maxlength="100" placeholder="请输入退款备注"...
·
<div class="common_title">
退款说明 <span>(选填)</span>
</div>
<div class="tk_text">
<textarea maxlength="100" placeholder="请输入退款备注" v-model="tkinfotest"></textarea>
<span>{{texsum}}/100</span>
</div>
<script>
export default {
data () {
return {
tkinfotest:"",//退款说明
texsum:0,//退款说明长度
}
},
methods:{
},
watch:{
tkinfotest(){
this.texsum = this.tkinfotest.length;
}
}
}
</script>
<style>
.tk_text{
margin: 0 .1rem;
position: relative;
}
.tk_text textarea{
font-size: .24rem;
color: #999999;
height: 2.4rem;
width: 100%;
padding: .2rem;
border-radius: .2rem;
}
.tk_text span{
font-size: .22rem;
color: #999999;
position: absolute;
bottom: .4rem;
right: .3rem;;
}
</style>
<div class="applyInput cb mt3">
<textarea placeholder="请输入" maxlength="500" @input="descInput" v-model="desc" />
<span class="numberV">{{txtVal}}/500</span>
</div>
<script>
export default {
name: '',
data () {
return {
txtVal: 0,
desc:""
}
},
methods: {
descInput(){
this.txtVal = this.desc.length;
}
}
}
</script>
更多推荐
已为社区贡献60条内容
所有评论(0)