vue获取屏幕宽度

vue3获取到屏幕的宽度

import { ref, onMounted, onUnmounted } from 'vue';

export default function useScreenWidth () {
    const screenWidth = ref(window.innerWidth);

    const handleResize = () => {
        screenWidth.value = window.innerWidth;
    };

    onMounted(() => {
        window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
    });

    return {
        screenWidth
    };
}

在需要的文件中使用
先导入import useScreenWidth from ‘@/utils/useScreenWidth’;
const { screenWidth } = useScreenWidth();
可以在表格中判断显示和隐藏某个列

vue2的写法

在utils里面创建useScreenWidth.js vue2需要使用混入才能使用

export const screenWidthMixin = {
  data() {
    return {
      screenWidth: window.innerWidth
    };
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
    }
  }
};

在使用的组件中进行导入，使用混入mixins引入就可以直接使用了

import { screenWidthMixin } from "../utils/useScreenWidth";
export default {
  mixins: [screenWidthMixin],
  }