vue中textarea自适应高度

• Z时代
• 2024-01-10
• 分类：综合

HTML:

<textarea class="myCircle_input" v-model="inputText" ref="elememt" @input="autoTextarea" :placeholder="pltxt"></textarea>

data () {
  return {
    pltxt: "评论",
    inputText: \'\',
    isHeight:true,
    minHeight:0,
  }
},

methods: {
      autoTextarea() {
        var extra = 0,   //设置光标与输入框保持的距离(默认0)
　　　　maxHeight = 60; //设置最大高度(可选)
　　　　var _that = this;
　　　　var isFirefox = !!document.getBoxObjectFor || \'mozInnerScreenX\' in window,
　　　　isOpera = !!window.opera && !!window.opera.toString().indexOf(\'Opera\');

　　　　　var paddingTop,paddingBottom
        var style,_length,valueLength,stylHeight,scrollHeight,currHeight;

          this.$nextTick(function () {
              if(this.isHeight){
                this.isHeight =  false
                this.minHeight = parseFloat(window.getComputedStyle(this.$refs.elememt).height)
              }

              paddingTop = parseInt(window.getComputedStyle(this.$refs.elememt).paddingTop)
              paddingBottom = parseInt(window.getComputedStyle(this.$refs.elememt).paddingBottom)
              style = this.$refs.elememt.style
              _length = this.$refs.elememt._length
              valueLength = this.$refs.elememt.value.length
              stylHeight = this.$refs.elememt.style.height
              scrollHeight = this.$refs.elememt.scrollHeight
              currHeight = this.$refs.elememt.currHeight

               change()
          })

        function change(){
          var  height, padding = 0;

          if (_length === valueLength) return;
              _length = valueLength;

          if (!isFirefox && !isOpera) {
            padding = paddingTop + paddingBottom;
          };
          stylHeight = _that.minHeight + \'px\';  //30px
          console.log(scrollHeight,_that.minHeight,maxHeight,padding)
          if (scrollHeight > _that.minHeight) {
            if (maxHeight && scrollHeight > maxHeight) {
              height = maxHeight - padding;
//              style.overflowY = \'auto\';
              style.overflowY = \'hidden\';
            } else {
              height = scrollHeight - padding;      //undefined 30 9
              style.overflowY = \'hidden\';
            };

            style.height = height + extra + \'px\';
            currHeight = parseInt(style.height);
          };
        }
      },

}

 CSS:

.myCircle_input{
  background: #ffffff;
  border: none;
  outline: none;
  width: 100PX;
  border-radius: 4px;
  padding: 12px 15px 7px;
  overflow: hidden;
  resize: none;   //调整属性指定一个元素是否是由用户调整大小的  both/horizontal 宽度/vertical 高度
  font-size: 30px;
  color:#333;
  line-height: 1.2;
  height: 60px;
  word-break: break-all;
  box-sizing: border-box;
}

以上是 vue中textarea自适应高度 的全部内容， 来源链接： utcz.com/z/374944.html