<template>
    <view class="bg">
        <input type="text" />

        <!-- 定位元素 -->
        <view class="btn" v-if="hidshow"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            //默认屏幕高度
            docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
            //实时屏幕高度
            showHeight: document.documentElement.clientHeight || document.body.clientHeight,
            //显示或者隐藏定位元素
            hidshow: true
        };
    },
    mounted() {
        //开始监听
        window.addEventListener('resize', this.listenResize);
    },
    methods: {
        listenResize() {
            this.showHeight = document.body.clientHeight;
        }
    },
    beforeDestroy() {
        //销毁
        window.removeEventListener('resize', this.listenResize);
    },
    watch: {
        //改变高度，就判断是否显示高度是否小于屏幕高度
        showHeight: function () {
            if (this.docmHeight > this.showHeight) {
                this.hidshow = false;
            } else {
                this.hidshow = true;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.bg {
    width: 100%;
    height: 100vh;
    background-color: red;

    .btn {
        width: 100%;
        height: 100px;
        background-color: rgb(255, 255, 255);
        position: fixed;
        bottom: 0;
    }
}
</style>