vue mixin传参
其实就是把mixin当做一个方法import { debounce } from '@/utils'export default function MyMixin(params) {const {element1 = '',element2 = '',element3 = ''} = paramsreturn {data() {return {$_sidebarElm1: null,$_side
·
其实就是把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]
}
更多推荐
已为社区贡献6条内容
所有评论(0)