先看效果是你想要的不!

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;
}

 

 

 

Logo

前往低代码交流专区

更多推荐