Vue2.0针对设备调节显示内容方法

一晚上完成0.2.2、0.3.0、0.3.1三个版本的更新，很高兴，总结一下
项目地址： 穆音博客
文章首发地址：Vue针对设备调节显示

Vue中进行优化的方式

总体来说有两种方法，其一是css的媒体查询，另一种是vue-mq库进行对设备断点，从而区分不同的设备，我这里用的是mq库进行。以下是使用方法：

导入mq

使用vue进行导入
npm install vue-mq
之后修改 main.js中的内容

// main.jsimport Vue from 'vue';import VueMq from 'vue-mq';Vue.use(VueMq, {  breakpoints: {  // 设置设备信息断点    mobilePortrait: 320,    mobileLandscape: 480,    tabletPortrait: 768,    tabletLandscape: 1024,    desktop: Infinity,  },});

配置mq

由于Vue-MQ 库本身并不提供与 Vuex 的集成，因此无法直接从 Vuex 中获取设备信息。我们需要修改store/index.js中的信息来完成配置

// store.jsconst store = new Vuex.Store({  state: {    device: 'desktop', // 初始值为桌面设备    // 其他状态...  },  mutations: {    updateDevice(state, device) {      state.device = device;    },    // 其他 mutations...  },  // 其他配置项...});

在根组件中监听设备变化情况，根据窗口大小完成信息更新

// App.vue  
      export default {  mounted() {    window.addEventListener('resize', this.updateDevice);    this.updateDevice(); // 初始更新设备信息  },  beforeDestroy() {    window.removeEventListener('resize', this.updateDevice);  },  methods: {    updateDevice() {      const isMobile = window.innerWidth <= 768; // 根据实际情况判断设备类型      this.$store.commit('updateDevice', isMobile ? 'mobile' : 'desktop');    },  },};

页面内使用

在需要使用的页面内完成导入，使用 mapState 辅助函数来获取设备信息：

// MyComponent.vue  
    
              
            import { mapState } from 'vuex';export default {  computed: {    ...mapState(['device']),    isMobile() {      return this.device === 'mobile';    },  },};/* 样式 */

在上面的示例中，我们使用 mapState 辅助函数来将设备信息状态 device 映射到组件的计算属性中。然后，在模板中使用 isMobile 计算属性来根据设备信息判断是否为移动设备，并相应地渲染不同的界面。
当然，也可以使用之前设置的断点进行配置，比如