屏幕的适配

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