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>