vue 实时获取页面的宽度，在vue原型上添加实例判断是否h5展示

背景: vue 实时获取页面的宽度，在vue原型上添加实例判断是否h5展示,根据页面不同宽度展示不同的样式,

创建plugins文件添加全局事件实时获取页面宽度

import Vue from 'vue';

const widthStore = new Vue({
  data() {
    return {
      windowWidth: window.innerWidth, // 页面宽度
      isH5: window.innerWidth > 768 ? false : true, // 判断是否H5展示
    };
  }
});

window.addEventListener('resize', (e) => {
  widthStore.windowWidth = window.innerWidth;
  widthStore.isH5 = window.innerWidth > 768 ? false : true;
});


export default {
  install: (Vue, options) => {
    // 挂载实例
    Vue.prototype.$widthStore = widthStore;
  }
};

入口文件下引入plugins文件

import Vue from 'vue';
import App from './App';// 导入插件
import plugin from '@/plugins'

Vue.use(plugin);

new Vue({
    el: '#app',
    xxx
});

使用时可以用watch监听变化

watch: {
    '$widthStore.isH5': function (value) {
        this.isH5 = value;
        console.log(value,  '是否H5展示');
 }