Vue 自定义指令实现 自动宽高

2020-11-04 发表在 编程语言 14

代码：

代码语言：javascript复制

Vue.directive('fill', {
    inserted(el) {
        function setHeight() {
            el.style.height = (window.innerHeight || 100)   'px';
             el.style.width = (window.innerWidth || 100)   'px';
        }
        window.addEventListener('resize', () => setHeight());
        window.addEventListener('load', () => setHeight());
    }
});

在上面定义好之后，直接使用v-fill指令即可

代码语言：javascript复制

<div id="app" v-fill >

</div>

实现的效果就是，页面一打开，就自动撑满整个网页，当窗口改变大小的时候，就自动设置大小。

编程语言

0 人点赞