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>