屏幕的适配
1、安装插件
2、在util文件夹里面新建一个index.js文件，并封装debounceEvent方法
export const debounceEvent = function(cb, delay = 300) {
let timeId;
return function() {
if (timeId) {
clearTimeout(timeId);
}
timeId = setTimeout(() => {
cb.apply(this, arguments);
}, delay);
};
};
3、在mixins文件夹下新建elementResizeDetector.js文件
import elementResizeDetectorMaker from 'element-resize-detector'
import { debounceEvent } from '@/util'
export default {
destroyed() {
if (this.erd) {
this.erd.removeAllListeners(this.ele)
}
},
methods: {
elementResizeDetector() {
this.erd = elementResizeDetectorMaker()
this.ele = document.getElementById('screen')
this.erd.listenTo(
this.ele,
debounceEvent((element) => {
var width = element.offsetWidth
var height = element.offsetHeight
// 全屏
if (height >= 1079) {
// console.log("全屏");
this.$nextTick(() => {
let htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = '192px'
if (this.$refs.chart && this.$refs.chart.myChart) {
this.$refs.chart.myChart.resize()
}
if (this.$refs.chart1 && this.$refs.chart1.myChart) {
this.$refs.chart1.myChart.resize()
}
if (this.$refs.chart2 && this.$refs.chart2.myChart) {
this.$refs.chart2.myChart.resize()
}
if (this.$refs.chart3 && this.$refs.chart3.myChart) {
this.$refs.chart3.myChart.resize()
}
if (this.$refs.chart4 && this.$refs.chart4.myChart) {
this.$refs.chart4.myChart.resize()
}
if (this.$refs.chart5 && this.$refs.chart5.myChart) {
this.$refs.chart5.myChart.resize()
}
if (this.$refs.chart6 && this.$refs.chart6.myChart) {
this.$refs.chart6.myChart.resize()
}
if (this.$refs.chart7 && this.$refs.chart7.myChart) {
this.$refs.chart7.myChart.resize()
}
if (this.$refs.chart8 && this.$refs.chart8.myChart) {
this.$refs.chart8.myChart.resize()
}
if (this.$refs.chart9 && this.$refs.chart9.myChart) {
this.$refs.chart9.myChart.resize()
}
if (this.$refs.chart10 && this.$refs.chart10.myChart) {
this.$refs.chart10.myChart.resize()
}
if (this.$refs.chart11 && this.$refs.chart11.myChart) {
this.$refs.chart11.myChart.resize()
}
if (this.$refs.chart12 && this.$refs.chart12.myChart) {
this.$refs.chart12.myChart.resize()
}
})
}
//退出全屏
if (width >= 1680 && width <= 1710) {
// console.log("退出全屏");
this.$nextTick(() => {
let htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = '168px'
if (this.$refs.chart && this.$refs.chart.myChart) {
this.$refs.chart.myChart.resize()
}
if (this.$refs.chart1 && this.$refs.chart1.myChart) {
this.$refs.chart1.myChart.resize()
}
if (this.$refs.chart2 && this.$refs.chart2.myChart) {
this.$refs.chart2.myChart.resize()
}
if (this.$refs.chart3 && this.$refs.chart3.myChart) {
this.$refs.chart3.myChart.resize()
}
if (this.$refs.chart4 && this.$refs.chart4.myChart) {
this.$refs.chart4.myChart.resize()
}
if (this.$refs.chart5 && this.$refs.chart5.myChart) {
this.$refs.chart5.myChart.resize()
}
if (this.$refs.chart6 && this.$refs.chart6.myChart) {
this.$refs.chart6.myChart.resize()
}
if (this.$refs.chart7 && this.$refs.chart7.myChart) {
this.$refs.chart7.myChart.resize()
}
if (this.$refs.chart8 && this.$refs.chart8.myChart) {
this.$refs.chart8.myChart.resize()
}
if (this.$refs.chart9 && this.$refs.chart9.myChart) {
this.$refs.chart9.myChart.resize()
}
if (this.$refs.chart10 && this.$refs.chart10.myChart) {
this.$refs.chart10.myChart.resize()
}
if (this.$refs.chart11 && this.$refs.chart11.myChart) {
this.$refs.chart11.myChart.resize()
}
if (this.$refs.chart12 && this.$refs.chart12.myChart) {
this.$refs.chart12.myChart.resize()
}
})
}
//折叠
if (width >= 1860 && width <= 1870) {
// console.log("折叠");
this.$nextTick(() => {
let htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = '186px'
if (this.$refs.chart && this.$refs.chart.myChart) {
this.$refs.chart.myChart.resize()
}
if (this.$refs.chart1 && this.$refs.chart1.myChart) {
this.$refs.chart1.myChart.resize()
}
if (this.$refs.chart2 && this.$refs.chart2.myChart) {
this.$refs.chart2.myChart.resize()
}
if (this.$refs.chart3 && this.$refs.chart3.myChart) {
this.$refs.chart3.myChart.resize()
}
if (this.$refs.chart4 && this.$refs.chart4.myChart) {
this.$refs.chart4.myChart.resize()
}
if (this.$refs.chart5 && this.$refs.chart5.myChart) {
this.$refs.chart5.myChart.resize()
}
if (this.$refs.chart6 && this.$refs.chart6.myChart) {
this.$refs.chart6.myChart.resize()
}
if (this.$refs.chart7 && this.$refs.chart7.myChart) {
this.$refs.chart7.myChart.resize()
}
if (this.$refs.chart8 && this.$refs.chart8.myChart) {
this.$refs.chart8.myChart.resize()
}
if (this.$refs.chart9 && this.$refs.chart9.myChart) {
this.$refs.chart9.myChart.resize()
}
if (this.$refs.chart10 && this.$refs.chart10.myChart) {
this.$refs.chart10.myChart.resize()
}
if (this.$refs.chart11 && this.$refs.chart11.myChart) {
this.$refs.chart11.myChart.resize()
}
if (this.$refs.chart12 && this.$refs.chart12.myChart) {
this.$refs.chart12.myChart.resize()
}
})
}
}, 400)
)
}
}
}
4、在需要适配的页面导入文件和mixins的共享函数
import elementResizeDetector from "@/mixins/elementResizeDetector";
mixins: [elementResizeDetector],
5、使用
fullScreen() {
var element = document.getElementById("screen");
this.$screenfull.request(element); // 元素全屏
this.elementResizeDetector();
},
在mounted里面调用fullScreen