zoukankan      html  css  js  c++  java
  • 脱坑记录--- removeEventListener 移除事件监听失败的经历--vue--keep-alive-----完美实现echarts自适应屏幕~~~~

    下面开始讲述事情经过~~~~

    页面代码是这样的

    <template>
      <page-view :title="title">
        <div id="myChart" ref="mapBox" style=" 100%; height: 500px"></div>
      </page-view>
    </template>
    <script>
    import { PageView } from '@/layouts'
    import echarts from 'echarts'
    // 設置圖表基礎配置項和數據
    const myOption = {
      title: { text: 'XXX', link: 'http://localhost:8000/', subtext: 'XXXXXXX' },
      // title: {
      //     text: '折线图堆叠'
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '视频广告',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '直接访问',
          type: 'line',
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '搜索引擎',
          type: 'line',
          stack: '总量',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    }
    export default {
      components: {
        PageView
      },
      data() {
        return {}
      },
      mounted() {
        // 初始化echarts實例
        this.myChart = echarts.init(this.$refs.mapBox)
        // 設置圖表的配置項和數據
        this.getData()
        // 設置圖表自定義縮放
        window.addEventListener('resize', this.resizeTheChart)
        // window.addEventListener('resize', this.resizeTheChart, false)
      },
      methods: {
        // 獲取數據,設置圖表配置項和數據1
        getData() {
          // const list = [{},{}]
          // myOption.series = list
          this.myChart.setOption(myOption)
        },
        // 獲取數據,設置圖表配置項和數據2
        // 設置圖表自定縮放1
        resizeTheChart() {
          console.log('縮放執行中~~~')
          if (this.$refs && this.$refs.mapBox) {
          const myChartNode = document.getElementById('myChart')
          if (myChartNode) {
            myChartNode.style.height = myChartNode.offsetWidth * 0.6 + 'px'
          }
          this.myChart.resize()
          }
        }
        // 設置圖表自定縮放2
      },
      computed: {
        title() {
          return this.$route.meta.title
        }
      },
      beforeDestroy() {
        window.removeEventListener('resize', this.resizeTheChart)
        // window.removeEventListener('resize', this.resizeTheChart, false)
      }
    }
    </script>

     问题来了: 

    进入组件后,切换其他组件,resize事件一直是存在的,没有被销毁,

    我先是怀疑自己应该给添加和移除事件添加第三个属性,

    我试了一下,没卵用

    然后开始疯狂谷歌搜索

    未果~~~~~   

    别人也是这样写的,人家的都有用,就我的没用

    然后我给 

    beforeDestroy    

    添加了一个打印,再切换页面,发现打印未执行

    我就知道了~~

    原来是压根没用执行
    beforeDestroy

    好了
    结局来了
    因为使用的是原有的框架
    使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
    当页面切换的时候
    被包含的组件保留状态,没有被重新渲染。

    使用缓存后,组件只挂载一次,永远不注销
    必须使用激活和冻结,代理挂载和注销~~~
    activated(){}   // 激活
    deactivated(){} // 冻结
    
    


    然后修改代码如下
    <template>
      <page-view :title="title">
        <div id="myChart" ref="mapBox" style=" 100%; height: 500px"></div>
      </page-view>
    </template>
    <script>
    import { PageView } from '@/layouts'
    import echarts from 'echarts'
    // 設置圖表基礎配置項和數據
    const myOption = {
      title: { text: 'xxxx', link: 'http://localhost:8000/', subtext: 'xxxx' },
      // title: {
      //     text: '折线图堆叠'
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: '视频广告',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: '直接访问',
          type: 'line',
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '搜索引擎',
          type: 'line',
          stack: '总量',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    }
    export default {
      components: {
        PageView
      },
      data() {
        return {}
      },
      mounted() {
        // 初始化echarts實例
        this.myChart = echarts.init(this.$refs.mapBox)
        // 設置圖表的配置項和數據
        this.getData()
      },
      methods: {
        // 獲取數據,設置圖表配置項和數據1
        getData() {
          // const list = [{},{}]
          // myOption.series = list
          this.myChart.setOption(myOption)
        },
        // 獲取數據,設置圖表配置項和數據2
        // 設置圖表自定縮放1
        resizeTheChart() {
          console.log('縮放執行中~~~')
          if (this.$refs && this.$refs.mapBox) {
            const myChartNode = document.getElementById('myChart')
            if (myChartNode) {
              myChartNode.style.height = myChartNode.offsetWidth * 0.6 + 'px'
            }
            this.myChart.resize()
          }
        },
        // 設置圖表自定縮放2
      },
      computed: {
        title() {
          return this.$route.meta.title
        }
      },
      activated() {
        // 設置圖表自定義縮放
        window.addEventListener('resize', this.resizeTheChart)
      },
      deactivated() {
        window.removeEventListener('resize', this.resizeTheChart)
      }
    }
    </script>

    完成~~~



  • 相关阅读:
    Ajax基础:3.Json
    Head First Design Patterns State Pattern
    Head First Design Patterns Template Method Pattern
    Articles For CSS Related
    Head First Design Patterns Decorator Pattern
    代码审查工具
    How To Be More Active In A Group
    Head First Design Patterns Factory Method Pattern
    Head First Design Patterns Composite Pattern
    Tech Articles
  • 原文地址:https://www.cnblogs.com/sugartang/p/12539587.html
Copyright © 2011-2022 走看看