在keyDown事件上调整Vue.js文本区域的大小，如何获取样式属性？
在keyDown事件上调整Vue.js文本区域的大小，如何获取样式属性？
提问于 2018-06-06 23:22:17
我想复制Vue.js Textarea组件的autosize library。我发现我无法获得以下几个属性的值：boxSizing，paddingTop，paddingBottom，borderTopWidth，borderBottomWidth to calculate heightOffset
const style = window.getComputedStyle(this.$refs.textarea, null);
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop + parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
}模板：
<textarea
class="answer"
ref="textarea"
v-bind:placeholder="placeholder"
v-on:keydown="setHeight"
v-bind:style="{ height: areaHeight + 'px' }"
>
</textarea>在组件中：
data: function () {
return {
placeholder: "Your answer",
areaHeight: 24
}
},
methods: {
setHeight: function(e) {
var ta = this.$refs.textarea;
console.log("ta.paddingTop: " + ta.paddingTop); //undefined
console.log("ta.style.paddingTop: " + ta.style.paddingTop); //""
console.log("ta.paddingBottom: " + ta.paddingBottom); //undefined
console.log("ta.style.paddingBottom: " + ta.style.paddingBottom); //""
console.log("ta.borderTopWidth: " + ta.borderTopWidth); //undefined
console.log("ta.style.borderTopWidth: " + ta.style.borderTopWidth); //""
console.log("ta.borderBottomWidth: " + ta.borderBottomWidth); //undefined
console.log("ta.style.borderBottomWidth: " + ta.style.borderBottomWidth); //""
this.areaHeight = this.$refs.textarea.scrollHeight;
if (e.keyCode === 13) {
this.areaHeight += 24;
}
if (e.keyCode === 8) {
this.areaHeight -= 24;
if(this.areaHeight <= 0) this.areaHeight = 24;
}
}回答 1
Stack Overflow用户
发布于 2018-06-07 07:05:46
我在Vue Forum上问了这个问题，并根据找到的建议找到了解决方案：
(....)
data: function () {
return {
placeholder: "Your answer",
areaHeight: 24,
style: null
}
},
// https://vuejs.org/v2/api/#mounted
mounted: function () {
const self = this;
self.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
const style = window.getComputedStyle(this.$refs.textarea, null);
self.style = style;
})
},
methods: {
setHeight: function(e) {
//https://github.com/jackmoore/autosize/blob/master/src/autosize.js
let heightOffset = null;
var ta = this.$refs.textarea
const style = this.style;
if (style.boxSizing === 'content-box') {
heightOffset = -(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));
} else {
heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);
}
// Fix when a textarea is not on document body and heightOffset is Not a Number
if ( isNaN(heightOffset) ) heightOffset = 0;
//ta.style.height = (ta.scrollHeight+heightOffset)+'px';
//Vue Async Update Queue:
this.$nextTick(function() {
this.areaHeight = this.$refs.textarea.scrollHeight + heightOffset;
});
/*
if (e.keyCode === 13) {
this.areaHeight += 24;
}
if (e.keyCode === 8) {
this.areaHeight -= 24;
if(this.areaHeight <= 0) this.areaHeight = 24;
}
*/
//console.log(this.areaHeight);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50724053
复制相关文章
相似问题