js调整浏览器窗口大小

在JavaScript或Vue.js中，当需要调整浏览器窗口大小时，通常我们会监听`window`对象上的`resize`事件。这将允许我们在窗口尺寸变化时执行某些操作。以下是基本的步骤： **JavaScript示例**: ```javascript window.addEventListener('resize', function() { // 当窗口大小改变时，这里的回调函数会被触发 console.log('窗口大小已调整'); // 在这里可以添加你想要响应窗口大小调整的逻辑，比如更新页面布局或重新渲染组件 }); ``` **Vue.js 示例 (Vuex + Action)** 如果你正在使用Vue.js，并且想通过状态管理库Vuex来处理窗口大小更改，可以在actions中定义响应操作： ```javascript // 在store/modules/window.js export const UPDATE_WINDOW_SIZE = 'UPDATE_WINDOW_SIZE'; const actions = { updateWindowSize({ commit }) { window.addEventListener('resize', () => { // 获取新的窗口尺寸并存储到状态中 const newSize = { width: window.innerWidth, height: window.innerHeight }; commit(UPDATE_WINDOW_SIZE, newSize); }); } }; // 在其他组件中，使用mapActions绑定这个action this.$store.dispatch('updateWindowSize'); ``` 然后，在组件里订阅这个状态的变化： ```html <template> <div ref="myRef" :style="{ width: windowSize.width, height: windowSize.height }"></div> </template> <script> import { mapState, mapActions } from 'vuex'; export default { computed: { ...mapState(['windowSize']) }, methods: { ...mapActions(['updateWindowSize']), handleResize() { this.updateWindowSize(); } }, mounted() { this.handleResize(); window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); } }; </script> ``` 记得在`beforeDestroy`生命周期钩子中移除事件监听。