uniapp-多行输入框框提示内容和输入内容实现换行,显示输入内容长度
uni-app中多行输入框中显示输入模板样例(需要换行-使用v-html),显示输入内容长度(computed计算),输入内容换行(cols),输入内容长度限制(maxlength)
html部分:
<view>
<textarea v-model="patientDesc.value"
v-html="patientDesc.descCur" cols="30" maxlength="500" rows="6">
</textarea>
<p >{{ textareaWordLenth }}/500</p>
</view>
js部分:
export default{
data(){
return{
patientDesc:{
value:"",
descCur:"",
desc:"<p>1.症状、疾病和身体状况</p><p>2.症状发生的时间、有无伴随症状</p><p>3.吃过什么药物</p><p>4.如就诊过,提供医生诊断、治疗经过</p><p>5.既往病史</p>"
}
}
},
computed:{
textareaWordLenth(){
if(this.patientDesc.value.length==0){
this.patientDesc.descCur = this.patientDesc.desc;
}else{
this.patientDesc.descCur = "";
}
return this.patientDesc.value.length;
}
}