-
实时监控当前输入字数,直接使用keyup事件方法。
-
给输入框加maxlength属性限制长度。
代码
<template>
<div class="conter">
<p class="number">输入字数:{{ conterNum }}/200</p>
<textarea
placeholder="点击输入详细原因"
id="textarea"
maxlength="200"
v-on:keyup="content()"
v-on:compositionstart="importStart()"
v-on:compositionend="importEnd()"
v-model="payload.content"
></textarea>
</div>
</template>
<script>
export default {
onLoad:function(input){
},
data(){
return{
payload:{
content: '',
},
conterNum: 0,
cInput: false,
}
},
methods:{
content() {
let self = this;
if (self.cInput == false) {
self.conterNum = self.payload.content.length;
}
},
importStart() {
this.cInput = true;
},
importEnd() {
this.cInput = false;
this.write();
}
}
}
</script>
<style>
.conter{
width:80%;
margin: 0 auto;
}
.number{
width: 100%;
text-align: right;
margin-top: 20pux;
}
#textarea{
border: 1px solid #f3f3f3;
border-radius: 20upx;
margin: 20upx 0 0 0;
text-indent: 20upx;
padding: 10px;
}
</style>
效果