美文网首页
Vue使用minxins引用

Vue使用minxins引用

作者: Frank_Fang | 来源:发表于2023-10-29 15:34 被阅读0次

// mixin/setTableHeight.js

export default {
  data () {
    return {
      tableHeight: 500,
      ready: false
    }
  },
  watch: {
    $route: {
      handler: function (route, oldRoute) {
        this.setTableHeight()
        window.addEventListener('resize', this.setTableHeight)
      },
      immediate: true
    }
  },
  methods: {
    setTableHeight () {
      this.$nextTick(() => {
        const tableWrapHeight = this.$refs.tableWrap?.offsetHeight
        this.tableHeight = tableWrapHeight || 500
      })
    }
  },
  async activated () {
    if (this.ready || this.$Config.ready === 0) {
      this.setTableHeight()
      window.addEventListener('resize', this.setTableHeight)
    }
    this.ready = true
    this.$Config.ready++
  },
  deactivated () {
    window.removeEventListener('resize', this.setTableHeight)
  },
  destroyed () {
    window.removeEventListener('resize', this.setTableHeight)
  }
}

// 引用

import setTableHeight from '@/mixin/setTableHeight.js'
mixins: [setTableHeight],

// 备注:引入mixin文件后,可以直接使用里面的方法(包括多个方法)

相关文章

网友评论

      本文标题:Vue使用minxins引用

      本文链接:https://www.haomeiwen.com/subject/ybjvidtx.html