【屏幕大小适配】屏幕宽度改变后实时更新JS代码-基于Vue实现

春暖花开.,

已于 2023-06-09 13:19:33 修改

阅读量608

点赞数

文章标签： javascript vue.js ecmascript 前端前端框架

于 2023-06-03 10:49:22 首次发布

本文链接：https://blog.csdn.net/m0_64494670/article/details/131018645

版权

这里基于Vue实现
在 if (screenWidth <= 575) 内对你的 javascript代码或data内属性进行修改，可搭配媒体查询联合使用
注意: 下面代码会实时监听你的屏幕宽度当你的屏幕宽度
优点: 实时监听不需要加载网页后才能触发生效，当你将你的屏幕宽度缩小时就能监听到

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
    this.handleResize(); // 初始执行一次回调函数
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 获取屏幕宽度
      const screenWidth = window.innerWidth || document.documentElement.clientWidth;

      // 检查屏幕宽度是否小于等于575px
      if (screenWidth <= 575) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    }
  }
};
</script>