写点什么

Vue 进阶(幺叁玖):textarea 文本框根据内容自适应改变高度

发布于: 刚刚
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
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺叁玖):textarea文本框根据内容自适应改变高度