PanBlogs
Vue 自定义指令实现 自动宽高
代码：
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());
}
});
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指令即可
html
<div id="app" v-fill >
</div><div id="app" v-fill >
</div>实现的效果就是，页面一打开，就自动撑满整个网页，当窗口改变大小的时候，就自动设置大小。