主要代码是:
document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight
父组件:
<template>
<div class="home">
<div id="testFullScreenId" class="pageFullScreen">
<div></div>
<HelloWorld
type="test"
FullScreenId="testFullScreenId"
v-model="inputVal"
@input="input"
></HelloWorld>
<br />
<button @click="sub">获取input值</button>
<br />
<HelloWorld
type="test"
FullScreenId="testFullScreenId"
v-model="inputVal"
@input="input"
></HelloWorld>
</div>
</div>
</template>
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "HomeView",
components: {
HelloWorld,
},
data() {
return {
inputVal: "",
};
},
created() {},
mounted() {},
methods: {
input(e) {
console.log(e);
},
sub() {
alert(this.inputVal);
},
},
};
</script>
<style scoped>
.pageFullScreen {
background-color: aqua;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
</style>
子组件:
<template>
<div class="hello">
<div class="inputList">
<input :type="type" @input="inputListInput($event)" />
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
type: {
// 文本框类型
type: String,
default: "text",
},
FullScreenId: {
// 文本框被键盘遮住
type: String,
default: "",
},
},
data() {
return {};
},
created() {},
mounted() {
// window.onresize监听页面高度的变化
window.onresize = () => {
return (() => {
// window.scroll(0, 0) // 滚到顶部
document.getElementById(this.FullScreenId).scrollTop =
document.getElementById(this.FullScreenId).scrollHeight;
})();
};
},
methods: {
// 键盘输入
inputListInput(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
<style scoped lang="scss">
</style>