<template>
<div class="container">
<div class="top" :style="{ height: topHeight + 'px' }">
上半部分内容
</div>
<div class="bottom" ref="bottom">
底部内容
底部内容底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
<textarea ref="myTextarea" v-model="content" @input="adjustTextareaHeight"></textarea>
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容
底部内容底部内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
topHeight: 0,
content: ''
};
},
methods: {
adjustTextareaHeight() {
this.$refs.myTextarea.style.height = 'auto';
this.$refs.myTextarea.style.height = this.$refs.myTextarea.scrollHeight + 'px';
}
},
computed: {
containerHeight() {
return this.$refs.bottom.offsetHeight;
}
},
watch: {
containerHeight(newValue) {
this.topHeight = newValue;
}
}
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
flex-grow: 1;
background: rebeccapurple;
color: red;
}
.bottom {
background: teal;
padding: 20px;
}
.container {
position: relative;
}
textarea {
resize: none;
overflow-y: hidden;
}
</style>
文章评论