vue中textarea高度的设置_vue中textarea自适应高度

HTML:

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;

}