Vue mixins 和 watch 动态监测屏幕的高度

最新推荐文章于 2025-03-31 16:29:02 发布

敢问

最新推荐文章于 2025-03-31 16:29:02 发布

阅读量567

点赞数

分类专栏： Vue 实战文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_41040445/article/details/117513765

版权

Vue 实战专栏收录该内容

2 篇文章

订阅专栏

当页面内容的高度不确定的时候 header 始终在顶部--- fixed。footer是随内容移动的内容很少则footer在页面底部，当内容很多footer在内容的底部

屏幕始终是满屏的不留空白

为了能够重复使用这个功能用了vue 的混入

mixins.js

export const MixIns = {
    data() {
        return {
            //屏幕高度
            clientHeight: '',
        }
    },
    mounted() {
        this.clientHeight = `${document.documentElement.clientHeight}`;
        let that = this
        window.onresize = function() {
            that.clientHeight = `${document.documentElement.clientHeight}`;
            if (that.$refs.page) {
                that.$refs.page.style.minHeight = that.clientHeight + 'px';
            }
        }
    },
    watch: {
        clientHeight(clientHeight) {
            this.$refs.page.style.minHeight = clientHeight + 'px';
        }
    }
}

app.vue

<template>
    <div>
        <div ref="page" class="live">
            <div id="local-player" class="player-box">
            </div>
        </div>
    </div>
</template>

<script>
import {MixIns} from "@/api/mixins.js"
    export default {
        mixins:[MixIns],
        data(){}
    }

不管那个页面。自需要设置 ref 等于 page

引入并注册即可实现。动态监测屏幕的高度