【vue】输入框和文本域切换

输入框的样子 

文本域的样子

当输入框出现滚动条的时候，就自动切换成文本域；当文本域到1行并且宽度小于输入框宽度时切换成输入框

            
             //文本域
              
                
              
              // 输入框
              
                
                
                
                  
                    
                      
                      
                    
                  
                  
                  
                    
                      

export default {
 data () {
    return {
      memory: "", //发送信息
      BtnDisabled :false,
      isOverflow: false,//切换输入框为文本框
      inputoffsetWidth: "",//输入框的宽度
      textareawidth: "100%"//文本域的宽度
    };
  },
 methods: {
   // 监听输入框
    oninput (e) {
      if (e !== "") {
        this.BtnDisabled = false;
      } else {
        this.BtnDisabled = true;
      }
      // 输入框超出变成文本框
      this.$nextTick(() => {
        const inputInner = this.$refs.inputRef.$el.querySelector('.el-input__inner');
        const textareaInner = this.$refs.inputRef.$el.querySelector('.el-textarea__inner');
        if (inputInner) {
          this.isOverflow = inputInner.scrollWidth > inputInner.offsetWidth;
          this.inputoffsetWidth = inputInner.offsetWidth
          setTimeout(() => {
            this.$refs.inputRef.focus()
          }, 100)
        }
        if (textareaInner) {
          // 是不是1行
          if (textareaInner.scrollHeight  {
                this.$refs.inputRef.focus()
                this.textareawidth = '100%'
              }, 100)
            }
          }
        }
      });
    },
    // 获取字符串的字节长度，中文2个、英文1个
    getBLen (str) {
      if (str == null) return 0;
      if (typeof str != "string") {
        str += "";
      }
      return str.replace(/[^\x00-\xff]/g, "01").length;
    },
 }
}

this.getBLen(e) * 7 + 35      这个应该是字符串长度乘以字体px加光标显示宽度，但是实际上按照实际数据来会出很大偏差，所以我自己检测了一下，最后才定下适合我的数据。

这个终究是估算的，所有多少会有些偏差，我目前也没找到其他方法，所以最终还是需要你们自行结合实际情况。