聊天输入框，自适应高度（最大4行） 

  1 <footer :class="footerClassObject">
  2     <div class="textarea" id="textareaDiv">
  3         <textarea placeholder=""
  4             @input="textareaChange($event)"
  5         ></textarea>
  6     </div>
  7 </footer>
  8 
  9 export default{
 10     data () {
 11         return {
 12             rows: 1, // 当前行数
 13             basisPoints: 30 // 基点高度，每次增加30px
 14         }
 15     },
 16     computed: {
 17         footerClassObject () {
 18             return {
 19                 'two-row': (this.basisPoints * this.rows / 30 === 2),
 20                 'three-row': (this.basisPoints * this.rows / 30 === 3),
 21                 'four-row': (this.basisPoints * this.rows / 30 >= 4)
 22             }
 23         }
 24     },
 25     methods: {
 26         textareaChange (event) {
 27             if (event.target.value === null || event.target.value === '') {
 28                 return
 29             }
 30             // 判断换行符的个数
 31             let lineNum = 0
 32             const re = /\n/g
 33             if (re.test(event.target.value)) {
 34                 lineNum = event.target.value.match(/\n/g).length
 35             }
 36             // 根据换行符进行数组切割，判断是否有自动换行
 37             let autoLineNum = 0
 38             let splitArr = event.target.value.split('\n')
 39             for (let i = 0; i < splitArr.length; i++) {
 40                 // 当前textarea宽度，经测算可以容纳31个字符长度，一个中文占俩个字符长度
 41                 // 由（width/font-size）* 2 计算得出31
 42                 let charLength = 0 // 当前字符长度
 43                 for (let j = 0; j < splitArr[i].length; j++) {
 44                     if (splitArr[i][j].charCodeAt(0) < 299) {
 45                         charLength++
 46                     } else {
 47                         charLength += 2
 48                     }
 49                 }
 50                 autoLineNum = autoLineNum + parseInt((charLength - 1) / 31)
 51             }
 52             let allRowNum = lineNum + autoLineNum
 53             if (allRowNum >= 3) {
 54                 this.rows = 4
 55             } else {
 56                 this.rows = allRowNum + 1
 57             }
 58             console.log(this.rows)
 59         }
 60     },
 61 }
 62 
 63 
 64 // 样式
 65 footer{
 66         position: fixed;
 67         bottom: 0;
 68         height: 0.79rem;
 69         width: 7.1rem;
 70         background: #ededef;
 71         border-top: 1px solid #a8a8aa;
 72         padding: 0.18rem 0.2rem;
 73         &.two-row{
 74             height: 1.09rem;
 75             .left-icon{margin-top: 0.4rem;}
 76             .textarea{
 77                 height: 0.6rem;
 78                 textarea{height: 0.6rem;}
 79             }
 80         }
 81         &.three-row{
 82             height: 1.39rem;
 83             .left-icon{margin-top: 0.7rem;}
 84             .textarea{
 85                 height: 0.9rem;
 86                 textarea{height: 0.9rem;}
 87             }
 88         }
 89         &.four-row{
 90             height: 1.69rem;
 91             .left-icon{margin-top: 1rem;}
 92             .textarea{
 93                 height: 1.2rem;
 94                 textarea{height: 1.2rem;}
 95             }
 96         }
 97         >span,>.textarea{ float: left; }
 98         .left-icon{
 99             font-size: 0.6rem;
100             margin: 0.1rem 0.2rem 0.1rem 0;
101         }
102         .textarea{
103             width: 4.36rem;
104             height: 0.3rem;
105             border: 1px solid #dcdcdc;
106             border-radius: 0.1rem;
107             padding: 0.24rem 0.16rem;
108             background-color: #fff;
109             textarea{
110                 float: left;
111                 width: 100%; /*自动适应父布局宽度*/
112                 height: 0.3rem;
113                 padding: 0;
114                 border: none;
115                 outline: none;
116                 resize: none;
117                 font-size: 0.28rem;
118                 line-height: 0.3rem;
119                 overflow:auto;
120                 word-break:break-all;
121                 height: expression((this.scrollHeight>120)?'120px':(this.scrollHeight+30)+'px');
122             }
123         }
124     }

 

posted @ 2019-05-21 10:55  落叶无痕~  阅读(857)  评论(0)    收藏  举报