vue mixin传参

其实就是把mixin当做一个方法，里面的data，methods生命周期等都丢进去，然后调用方在new一个这个方法就好了

import { debounce } from '@/utils'

export default function MyMixin(params) {
  const {
    element1 = '',
    element2 = '',
    element3 = ''
  } = params
  return {
    data() {
      return {
        $_sidebarElm1: null,
        $_sidebarElm2: null,
        $_sidebarElm3: null,
        $_resizeHandler: null
      }
    },
    mounted() {
      this.initListener()
    },
    activated() {
      if (!this.$_resizeHandler) {
        // avoid duplication init
        this.initListener()
      }
      // when keep-alive chart activated, auto resize
      this.resize()
    },
    beforeDestroy() {
      this.destroyListener()
    },
    deactivated() {
      this.destroyListener()
    },
    methods: {
      // use $_ for mixins properties
      // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
      $_sidebarResizeHandler(e) {
        if (e.propertyName === 'width') {
          this.$_resizeHandler()
        }
      },
      initListener() {
        this.$_resizeHandler = debounce(() => {
          this.resize()
        }, 100)
        window.addEventListener('resize', this.$_resizeHandler)

        this.$_sidebarElm1 = document.getElementById(element1)
        this.$_sidebarElm1 && this.$_sidebarElm1.addEventListener('transitionend', this.$_sidebarResizeHandler)

        this.$_sidebarElm2 = document.getElementById(element2)
        this.$_sidebarElm2 && this.$_sidebarElm2.addEventListener('transitionend', this.$_sidebarResizeHandler)

        this.$_sidebarElm3 = document.getElementById(element3)
        this.$_sidebarElm3 && this.$_sidebarElm3.addEventListener('transitionend', this.$_sidebarResizeHandler)
      },
      destroyListener() {
        window.removeEventListener('resize', this.$_resizeHandler)
        this.$_resizeHandler = null
        this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
      },
      resize() {
        const { chart1, chart3, chart2 } = this
        chart1 && chart1.resize()
        chart2 && chart2.resize()
        chart3 && chart3.resize()
      }
    }
  }
}

import MyMixin from '../mixins/resize.js'
const mixin = new MyMixin({
  element1: 'positionTop5',
  element2: 'onDuty',
  element3: 'peopleCount'
})
import {
  generalStatis,
  gradeStatis,
  top5Company,
  top5Position
} from '@/api/index'
export default {
  name: 'DashboardEditor',
  components: {},
  mixins: [mixin]
  }