在支付宝小程序,使用textarea maxlength="50",无需再额外定义下方0/50的样式,自动就有。
在微信小程序、H5(app没有试),使用textarea maxlength="50",下方还是需要自己写一个0/50的样式。
为了兼容各端,可以这样写:
效果:
html:
<textarea
class="textarea"
placeholder-style="font-size: 22rpx; color: #999999;"
placeholder="给快递员捎句话吧"
:data-maxnum="(form.remark ? form.remark.length : 0) + '/20'"
v-model="form.remark"
/>
css:
.textarea {
width: 100%;
height: 100%;
font-size: 22rpx;
background: #F4F4F4;
&:after{
content: attr(data-maxnum);
position: absolute;
right: 0;
bottom: 0;
font-size: 22rpx;
color: #999999;
}
}