vue项目经验:window.onresize的使用
重点:window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的clientWidth获取,然后通过watch监听clientWidth的值,即可触发组件事件App
·
重点: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)
}
},
更多推荐
已为社区贡献13条内容
所有评论(0)