vue自适应响应布局

在项目入口index.vue中

1.在methods中定义方法：

windowResizeListener() {

// 屏幕自适应

let widthScreen = document.body.clientWidth;

this.scaleW = widthScreen / 1920;

this.widthScreen = (100 * 1920) / widthScreen;

// 只配置宽度缩放，高度页面需要设置百分比来自适应，否则echarts中饼图会变形

},

2.在项目生命周期初始化完成后调用

created（）{

this.windowResizeListener();

window.addEventListener("resize", this.windowResizeListener);

}

3.在项目生命周期卸载前清除监听事件

beforeDestroy() {

window.removeEventListener("resize", this.windowResizeListener);

},