专栏首页python3ElementUI-textarea文本域高度自适应设置的方法

ElementUI-textarea文本域高度自适应设置的方法

一、概述

textarea默认情况下,当超出范围后,会在右边显示滑动条

 体验不太好,不需要滑动条,根据内容,自动增加高度,并显示完整内容。

二、解决方法

主要有3种方式:

:rows="2" -->固定行数

:autosize="{minRows:2,maxRows:8} -->高度范围

autosize -->文本域高度自适应

这里采用第3中方式,增加autosize,

test.vue完整代码如下:

<template>
  <div>
    <el-form ref="createForm" :model="createForm" label-width="100px" label-position="left" size="mini">
      <el-form-item label="描述" prop="desc">
        <!-- <el-input type="textarea" v-model="createForm.desc" :autosize="{minRows:2,maxRows:8}"></el-input> -->
        <!-- <el-input type="textarea" v-model="createForm.desc" :rows="2"></el-input> -->
        <el-input type="textarea" v-model="createForm.desc" autosize></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data() {
      return {
        createForm:{
          desc:""
        }
      }
    }
  }
</script>

<style scoped>

</style>

刷新页面,再次输入文字,效果如下:

本文参考链接:

https://blog.csdn.net/yangwqi/article/details/104068693

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序textarea与弹窗

    在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面,而且还能点击输入文字。

    IMWeb前端团队
  • 设计iOS中随系统键盘弹收和内容文字长度自适应高度的文本框

        文本输入框是多数与社交相关的app中不可或缺的一个控件,这些文本输入框应该具备如下的功能:

    珲少
  • ElementUI和Ant Design对比

    &nbsp;&nbsp;&nbsp;&nbsp;首先,通过一张表格来对比这两框架的异同吧

    陨石坠灭
  • JS - 可自动伸缩高度的文本框

    change事件的现象是,输入框失去焦点的时候才会触发。如果文本框内容超出高度然后用户还在输入的时候,体验就会很不好。而且如果用户一直不点击别的地方让texta...

    xing.org1^
  • 【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器

    要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是String、Number...

    魏晓蕾
  • Form表单 问题多多(中)

    HTML5学堂 - 刘国利:在上一篇的博文当中,主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中,我主要就具体的样式实现进行一下讲解,并提一下表单相关的浏览器...

    HTML5学堂
  • 由微信小程序原生组件层级引发的“血案”

    今天就来谈谈微信小程序,原生组件层级导致的问题。 官方是这样说的:“原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原...

    Javanx
  • 技巧:文本超过N行折叠内容并显示“...查看全部”

    多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个Vue的组件,本文简...

    Nealyang
  • 技巧:文本超过N行折叠内容并显示“...查看全部”

    多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求,网上也有人实现过类似的功能,不过还是想自己写写看,于是就写了一个Vue的组件,本文简...

    @超人

扫码关注云+社区

领取腾讯云代金券