<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,但解決辦法與框架無關(guān)，如果整體輸入框任然有一部分被鍵盤遮擋（應(yīng)為默認(rèn)控件邊界在鍵盤上方即可），可使用vue的動態(tài)綁定class，給控件一個底部外邊距即可