前端监听分辨率，menu切换，FullCalendar日历高度赋值

这是vue

之前写过一个监听页面分辨率改变，给高度赋值的项目

throttle是一种常见的函数节流技术，用于控制函数在一定时间间隔内执行的次数。当需要频繁触发某个函数时，使用节流技术可以避免函数被频繁执行，从而提高页面性能。

throttle的基本思想是，将函数的执行频率限制在一定时间间隔内。当函数被触发时，如果距离上次执行的时间小于指定的时间间隔，则不执行函数；否则，执行函数并记录当前执行的时间戳。

 

这里乱写的，不重要，主要实现逻辑就是这样

今天要写一个值班表，使用 FullCalendar，但是这个只有宽度会自动改变，高度根本不动啊

继续套上面的代码，但是遇到问题，之前的都是跳转路由，beforeDestroy可以销毁

但是这个值班表项目整体框架是iview的menu，beforeDestroy不能销毁

多次尝试发现，menu的点击会有缓存，就是说mounted只会执行一次，那么销毁后，我们还需要考虑再次赋这个监听时间。

这样就能销毁了，然后考虑menu点击回来赋值。 

 

不多废话，下面贴代码：

import { throttle } from 'lodash'

tf: null,

mounted() {

    // 按钮绑定日历点击事件

    this.$nextTick(() => {

      this.$refs.fullCalendar.getApi().updateSize()

      // 点击上个月

      const prevBtn = document.querySelector('.fc-prev-button')

      prevBtn.addEventListener('click', () => {

        this.initData()

      })

      // 点击下个月

      const nextBtn = document.querySelector('.fc-next-button')

      nextBtn.addEventListener('click', () => {

        this.initData()

      })

      // 当月

      const todayBtn = document.querySelector('.fc-today-button')

      todayBtn.addEventListener('click', () => {

        this.initData()

      })

    });

    // 日历适配分辨率

    this.tf = throttle(this.handleResize, 200)

    window.addEventListener('resize', this.tf)

    this.handleResize()

    // 初始化日历

    this.initData()

    const transferLists = document.querySelectorAll('.ivu-transfer-list');

    transferLists[0].style.width = '30%';

    transferLists[1].style.width = '55%';

  },

// 这个没用，后面研究一下

  // beforeDestroy() {

  //   window.removeEventListener('resize', this.tf)

  // },

  beforeRouteLeave(to, from, next) {

    window.removeEventListener('resize', this.tf)

    next();

  },

  beforeRouteEnter(to, from, next) {

    const doSomething = (vm) => {

      // 日历适配分辨率

      vm.tf = throttle(vm.handleResize, 200)

      window.addEventListener('resize', vm.tf)

      // 在nextTick回调函数中访问$refs对象

      vm.$nextTick(() => {

        vm.handleResize()

      });

      // 设置leftRoute标志

      vm.leftRoute = from.path !== to.path;

    };

    next(vm => {

      // 在回调函数中访问组件实例并调用doSomething方法

      doSomething(vm);

    });

  },

 // 解决日历渲染的分辨率变化bug

    handleResize() {

      const calendar = this.$refs.fullCalendar.getApi();

      const height = document.documentElement.clientHeight - 185;

      calendar.setOption("height", height);

      calendar.updateSize();

    },