Vue 进阶（幺叁玖）：textarea 文本框根据内容自适应改变高度

关注

发布于: 刚刚

项目开发过程中，在展示用户录入意见信息时，使用el-input标签，type=”textarea”属性，在指定:row=”number”后，若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在 IE 环境下，该滚动条是隐藏的，用户体验性不好，故考虑实现文本框根据文本内容自适应高度的效果。应用代码如下：

<template>    <div class="my-textarea">      <textarea ref="textarea" :style="{'height': height}" v-model="value" class="textarea" ></textarea>    </div></template>
<script>  import calcTextareaHeight from '@/assets/calcTextareaHeight';
  export default {    name: 'my-textarea',    data() {      return {        // textarea内容        value: '',        // 动态高度        height: '30px'      }    },    watch: {      value() {        this.getHeight();      }    },    methods: {      getHeight() {        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;      }    }  }</script>
<style scoped>  .my-textarea .textarea {    display: inline-block;    width: 400px;    /*height: 30px;*/    line-height: 30px;    font-size: 30px;    resize: none;  }</style>

复制代码

基于el-input封装的自定义组件cus-input下载地址：点击下载

应用方法：

<cus-input type=”textarea” :autosize=”AUTOSIZE”></cus-imput>import CusInput from ‘...’export default {component: {CusInput }data () {  return {    AUTOSIZE: {    minrows: 1,    maxrows: 20    }  }}}

复制代码

以上实现了 textarea 文本输入框最大显示上限为 20 行，大约 1200 汉字。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/921cb42788fc0904a2a6138be】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺叁玖）：textarea 文本框根据内容自适应改变高度

No Silver Bullet

评论