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

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

代码:

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指令即可

<div id="app" v-fill >

</div>

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

作者:贝塔博客
本站使用「署名 4.0 国际」创作共享协议,转载请在文章明显位置注明作者及出处。
评论
登录以后才可以发布评论哦, 点击登录 发布评论
评论列表 0人参与,0条评论
暂时还没有人评论,快来一条神回复吧!