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.js import 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.js  const store = new Vuex.Store({   state: {     device: 'desktop', // 初始值为桌面设备     // 其他状态...   },   mutations: {     updateDevice(state, device) {       state.device = device;     },     // 其他 mutations...   },   // 其他配置项... }); 

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

// App.vue  <template>   <div id="app">     <!-- 页面内容 -->   </div> </template> <script> 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');     },   }, }; </script> 

页面内使用

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

// MyComponent.vue  <template>   <div class="my-component">     <div v-if="isMobile">       <!-- 移动设备界面 -->     </div>     <div v-else>       <!-- 非移动设备界面 -->     </div>   </div> </template>  <script> import { mapState } from 'vuex';  export default {   computed: {     ...mapState(['device']),     isMobile() {       return this.device === 'mobile';     },   }, }; </script>  <style> /* 样式 */ </style> 

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

<template>   <div class="my-component">     <!-- 大屏设备的内容 -->     <div v-if="$mq === 'desktop'">       <!-- 大屏设备特定的内容 -->     </div> <!-- 移动设备内容 -->     <div v-else-if="$mq === 'mobilePortrait' || $mq === 'mobileLandscape'">     </div>     <!-- 小屏设备的内容 -->     <div v-else>       <!-- 小屏设备特定的内容 -->     </div>   </div> </template>