uniapp-H5、vue 中好用的textarea右下角显示字数限制
先看效果是你想要的不!html<textarea class="JTxtArea lg":maxlength="88":data-maxnum="reason.length+'/88'"@input="inputReason"auto-height:value="reason"></textarea>jsinputReason(e){this.reason=e.detail
·
先看效果是你想要的不!
html
<textarea class="JTxtArea lg"
:maxlength="88"
:data-maxnum="reason.length+'/88'"
auto-height
v-model="reason"></textarea>
scss
.JTxtArea {
background-color: $theme-bgColor;
border-radius: 5px;
width: calc(100% - 16px);
// box-sizing: border-box;
padding: 8px;
min-height: 60px;
line-height: 20px;
color: #000000;
position: relative;
&.sm{
min-height: 30px;
}
&.lg{
min-height: 100px;
}
&:after{
content: attr(data-maxnum);
position: absolute;
right: 5px;
bottom: 0px;
font-size: 12px;
color: $color-gray;
}
}
Tip:
因为在uniapp中v-model绑定事件,软键盘输入概率导致光标闪烁,所以用的:value和@input绑定,vue中请忽略
<textarea class="JTxtArea lg"
:maxlength="88"
:data-maxnum="reason.length+'/88'"
auto-height
@input="inputReason"
:value="reason"></textarea>
inputReason(e){
this.reason=e.detail.value;
}
更多推荐
已为社区贡献7条内容
所有评论(0)