博客

element textarea autosize根据屏幕大小设置 遇到的一些问题

需求效果是想文本框占据页面剩余位置

几次测试后发现textarea设置maxRows刚好沾满剩余位置即可，，那么根据屏幕高度计算出合适的maxRows就可以了，开干

<!--    初始代码-->
<el-input class="log-box" type="textarea"  :autosize="autosize" v-model="logDetail"></el-input>

data(){
    return{
        windowHeight: document.documentElement.clientHeight,   //当前屏幕高度
        autosize:{minRows:15,maxRows:15},    
    }
},
watch: {
  windowHeight(val) {
    let that = this;
    that.setLogTextareaMaxHeight()
  }
},
mounted() {
  let that = this;
  that.setLogTextareaMaxHeight()
  window.onresize = () => {
    return (() => {
      window.fullHeight = document.documentElement.clientHeight;
      that.windowHeight = window.fullHeight;
    })()
  }
},
methods:{
    setLogTextareaMaxHeight(){
      let logBoxHeight = this.windowHeight - document.getElementsByClassName('top')[0].clientHeight - 160 
      let logTextarea = logBoxHeight - 12  // 12: textarea__inner的上下padding+border
      this.autosize.maxRows=Math.floor(logTextarea / 20)  //20: textarea__inner的行高
      this.autosize.minRows=this.autosize.maxRows
      console.log(this.autosize )
    },
}

问题来了，，高度改变时 autosize.minRows /maxRows 值都已经改了但页面文本框高度还是不变

于是试了把 minRows ，maxRows都单独拿出来用computed 去更改 ，，效果一样 ，无果，还是无法触发组件视图更新 ，又想到用this.$set 来更新 依然无果

百度了一下没有合适的 最后在社区参考了 GitHub 一个 autosize的 issue 发现一个调用textarea 新的用法， 解决

//setLogTextareaMaxHeight
this.$refs.logInfo.resizeTextarea();