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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
 

基于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
		}
	}
}
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

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

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/109264632