element 文本域设置隐藏边框，禁止缩放，自动换行...

巨蟹座守护骑士

已于 2024-05-07 09:08:27 修改

阅读量654

点赞数 5

分类专栏： element 文章标签： javascript 前端 css3

于 2024-03-26 13:15:14 首次发布

本文链接：https://blog.csdn.net/weixin_70563937/article/details/137042954

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章详细介绍了如何在Vue的ElementUI中使用``组件实现文本区域的定制，包括隐藏边框、禁止缩放、自动换行、字数限制以及在回复评论场景中的融合应用。

摘要由CSDN通过智能技术生成

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>