vue混入（mixins）的用法

2020-12-25

前言

项目需求：在实现echarts省地图的时候，需要根据传入的字段来使用不同的json数据。但是由于有三十多个省份写在同一个页面会觉得比较复杂，就需要把这部分代码提取出来，从而想到了通过混入实现。同理，也可以通过混入实现防抖。

什么是混入？

混入 (mixins)：是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

混入文件

地图json文件

import anhui from '../../../../../node_modules/echarts/map/json/province/anhui.json'
import aomen from '../../../../../node_modules/echarts/map/json/province/aomen.json'
import beijing from '../../../../../node_modules/echarts/map/json/province/beijing.json'
import chongqing from '../../../../../node_modules/echarts/map/json/province/chongqing.json'
import fujian from '../../../../../node_modules/echarts/map/json/province/fujian.json'
import gansu from '../../../../../node_modules/echarts/map/json/province/gansu.json'
import guangdong from '../../../../../node_modules/echarts/map/json/province/guangdong.json'
import guangxi from '../../../../../node_modules/echarts/map/json/province/guangxi.json'
import guizhou from '../../../../../node_modules/echarts/map/json/province/guizhou.json'
import hainan from '../../../../../node_modules/echarts/map/json/province/hainan.json'
import hebei from '../../../../../node_modules/echarts/map/json/province/hebei.json'
import heilongjiang from '../../../../../node_modules/echarts/map/json/province/heilongjiang.json'
import henan from '../../../../../node_modules/echarts/map/json/province/henan.json'
import hubei from '../../../../../node_modules/echarts/map/json/province/hubei.json'
import hunan from '../../../../../node_modules/echarts/map/json/province/hunan.json'
import jiangsu from '../../../../../node_modules/echarts/map/json/province/jiangsu.json'
import jiangxi from '../../../../../node_modules/echarts/map/json/province/jiangxi.json'
import jilin from '../../../../../node_modules/echarts/map/json/province/jilin.json'
import liaoning from '../../../../../node_modules/echarts/map/json/province/liaoning.json'
import neimenggu from '../../../../../node_modules/echarts/map/json/province/neimenggu.json'
import ningxia from '../../../../../node_modules/echarts/map/json/province/ningxia.json'
import qinghai from '../../../../../node_modules/echarts/map/json/province/qinghai.json'
import shandong from '../../../../../node_modules/echarts/map/json/province/shandong.json'
import shanghai from '../../../../../node_modules/echarts/map/json/province/shanghai.json'
import shanxi from '../../../../../node_modules/echarts/map/json/province/shanxi.json'
import shanxi1 from '../../../../../node_modules/echarts/map/json/province/shanxi1.json'
import sichuan from '../../../../../node_modules/echarts/map/json/province/sichuan.json'
import taiwan from '../../../../../node_modules/echarts/map/json/province/taiwan.json'
import tianjin from '../../../../../node_modules/echarts/map/json/province/tianjin.json'
import xianggang from '../../../../../node_modules/echarts/map/json/province/xianggang.json'
import xinjiang from '../../../../../node_modules/echarts/map/json/province/xinjiang.json'
import xizang from '../../../../../node_modules/echarts/map/json/province/xizang.json'
import yunnan from '../../../../../node_modules/echarts/map/json/province/yunnan.json'
import zhejiang from '../../../../../node_modules/echarts/map/json/province/zhejiang.json'
import china from '../../../../../node_modules/echarts/map/json/china.json'

export default {
  data() {
    return {
      mapJson: {}
    }
  },
  mounted() {
    // 注意 山西为shanxi 陕西为shanxi1
    this.mapJson = {
      'anhui': anhui,
      'aomen': aomen,
      'beijing': beijing,
      'chongqing': chongqing,
      'fujian': fujian,
      'gansu': gansu,
      'guangdong': guangdong,
      'guangxi': guangxi,
      'guizhou': guizhou,
      'hainan': hainan,
      'hebei': hebei,
      'heilongjiang': heilongjiang,
      'henan': henan,
      'hubei': hubei,
      'hunan': hunan,
      'jiangsu': jiangsu,
      'jiangxi': jiangxi,
      'jilin': jilin,
      'liaoning': liaoning,
      'neimenggu': neimenggu,
      'ningxia': ningxia,
      'qinghai': qinghai,
      'shandong': shandong,
      'shanghai': shanghai,
      'shanxi1': shanxi,
      'shanxi3': shanxi1,
      'sichuan': sichuan,
      'taiwan': taiwan,
      'tianjin': tianjin,
      'xianggang': xianggang,
      'xinjiang': xinjiang,
      'xizang': xizang,
      'yunnan': yunnan,
      'zhejiang': zhejiang,
      'china': china,
    }
  },
}

resize防抖文件

import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.$_resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  beforeDestroy() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  // to fixed bug when cached by keep-alive
  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
  activated() {
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  deactivated() {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_initResizeEvent() {
      window.addEventListener('resize', this.$_resizeHandler)
    },
    $_destroyResizeEvent() {
      window.removeEventListener('resize', this.$_resizeHandler)
    },
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    $_initSidebarResizeEvent() {
      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    $_destroySidebarResizeEvent() {
      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    }
  }
}

使用

1.引入

import resize from ‘./mixins/resize’
import mapJson from ‘./mixins/mapJson’

2.使用

mixins: [resize,mapJson]

通过以上的写法，resize和mapJson中的值和方法在当前页面都有效果。

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import resize from './mixins/resize'
  import mapJson from './mixins/mapJson'


  export default {
    mixins: [resize,mapJson],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null,
        currentJson: {}
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        for(let i in this.mapJson){
          if(this.chartData.map === i){
            this.currentJson = this.mapJson[i]
          }
        }
        this.chart = this.$echarts.init(this.$el, 'macarons')
        this.$echarts.registerMap('map', this.currentJson);
        this.setOptions(this.chartData.list)
      },
      setOptions(expectedData) {
        
      }
    }
  }
</script>