Vue中解决键盘遮挡底部输入框

<template>
    <div v-resize="onResize">
        <v-footer class="" app inset :absolute='keybord' padless :style="{height: messageInputHeight}" v-bind:class="keybord?'mb-5':''">
            <v-text-field ref="searchbar" class="ma-1 elevation-0 searchbar" v-model="messtext" solo flat hide-details clearable
             label="" append-icon="send" @click:append='sendMessage()' @keyup.enter="sendMessage()"></v-text-field>
        </v-footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keybord: false,
                windowSize: {
                    x: 0,
                    y: 0,
                },
            }
        },
        methods: {
            onResize(){
                if(this.windowSize.y-window.innerHeight>60){
                    this.keybord=true
                }else{
                    this.keybord=false
                }
            }
        },
        mounted() {
            //缓存初始高度
            this.windowSize = { x: window.innerWidth, y: window.innerHeight }
            this.onResize()
        },
    }
</script>

<style>
</style>

部分控件使用了Vuetify,但解决办法与框架无关，如果整体输入框任然有一部分被键盘遮挡（应为默认控件边界在键盘上方即可），可使用vue的动态绑定class，给控件一个底部外边距即可