1.隐藏边框
:deep(.el-textarea__inner) {
box-shadow: 0 0 0 0px;
}
:deep(.el-textarea__inner:hover) {
box-shadow: 0 0 0 0px;
}
:deep(.el-textarea__inner:focus) {
box-shadow: 0 0 0 0px;
}
2.禁止缩放
resize="none"
3.自动换行
autosize
minRows: 5 默认显示多少行
maxRows: 5 最多显示多少行,超过滚动
4.限制字数
maxlength="500"
show-word-limit 设置为true显示当前多少字数默认为false不显示
<el-input type="textarea" resize="none" :autosize="{ minRows: 5, maxRows: 5 }" maxlength="500" show-word-limit>
</el-input>
5.融合使用
<!-- 回复评论 -->
<div class="reply_to">
<el-input v-model="reply_content" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="1000" type="textarea" :placeholder="'回复 ' + item.userName" resize="none" />
<div class="btn">
<el-button type="primary" size="small" @click="discuss_reply(item.id)"
:disabled="reply_content.trim() == ''">发送</el-button>
<span>{{ reply_content.length }} / 1000</span>
</div>
</div>
6.效果