重点window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的clientWidth获取,然后通过watch监听clientWidth的值,即可触发组件事件

App.vue代码

<script>
export default {
  name: 'app',
  mounted () {
    window.onresize = () => {
      this.clientWidthResize()
    }
  },
  methods: {
    clientWidthResize () {
      this.$store.commit('Tool/resizeWidth', Number(document.documentElement.clientWidth))
    }
  }
}
</script>

store中tool.js代码(此处进行模块化开发)

export default {
  namespaced: true,
  state: {
    clientWidth: 0
  },
  getters: {},
  mutations: {
    resizeWidth(state, clientWidth) {
      state.clientWidth = clientWidth;
    },
  },
  actions: {},
}

组件使用

computed: {
  clientWidth () {
    return this.$store.state.Tool.clientWidth || Number(document.documentElement.clientWidth)
  }
},
watch: {
  clientWidth (val) {
    console.log(val)
  }
},
Logo

前往低代码交流专区

更多推荐