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

这篇具有很好参考价值的文章主要介绍了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 计算属性来根据设备信息判断是否为移动设备,并相应地渲染不同的界面。
当然,也可以使用之前设置的断点进行配置,比如文章来源地址https://www.toymoban.com/news/detail-503029.html

<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>

到了这里,关于Vue2.0针对设备调节显示内容方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE3相比VUE2升级了哪些内容

    目录 一、Vue 3 、Vue 2 对比及提升项 二、  Vue 3 创建app.vue示例  三、Vue3 的setup、Vue2 的 data对比 一、Vue 3 、Vue 2 对比及提升项 性能提升:Vue 3 做了大量的优化工作,提升了运行时的性能。例如,在模板编译时进行的静态分析和优化,以及使用了更高效的响应式系统,使得数据

    2024年01月22日
    浏览(51)
  • 中柏 EZpad 8 Windows 平板电脑 |驱动备份|系统优化|不能调节显示器亮度|进入Bios/uefi 快捷键 |蓝牙扫描不到设备|CPU占用过高解决方案

              之前一直使用的这个平板,但是有个很严重的问题就是性能实在太差了,每次都是CPU百分百,Mem 百分之50% 这个结果真的很意外, 但是又无可奈何,后面花时间做了一些优化包括 进程限制  启动优化  内存页面优化  但结果都不尽人意,一启动程序就卡顿 ..........  中间又

    2024年02月09日
    浏览(125)
  • Vue2到3 全套学习内容(持续更新)

    目录 一、Vue 初次上手  1. Vue 概念 2.创建 Vue 实例,初始化渲染  3.插值表达式 4.响应式特性 5.安装 Vue 开发者工具: 装插件调试 Vue 应用 二、Vue 指令  1.内容渲染指令 v-text,v-html  2.1 条件渲染指令 v-show , v-if 2.2 条件渲染指令 v-else, v-else-if 3.事件绑定指令  v-on 1️⃣内

    2024年02月15日
    浏览(40)
  • centos7新增分辨率 1920 1080 ,网上各种方法大罗列!(亲测针对不同设备,有的有用!有的......)

    步骤总结如下: cvt 1920 1080 xrandr --newmode \\\" 1920x1080_60.00\\\"173.0019202048 2248 2576 1080 1083 1088 1120 - hsync +vsync xrandr --addmode VGA-1 “1920x1080_60.00” (VGA-1 要看自己的配置,别瞎改) xrandr -s 1920x1080_60.00 要想永久生效,请看文末几种方法 (总结网上多种方法) 具体过程截图如下!! cvt 1920

    2024年02月10日
    浏览(39)
  • vue2获取当前设备的 IP 地址以及位置信息

    data数据:

    2024年04月25日
    浏览(44)
  • vue2.0实现富文本编辑及文本内容展示

    1,下载富文本插件 2,可以直接在页面进行引入,也可以全局挂载,(只展示页面引入) 3,页面使用 4,页面展示效果为  5,到这一步如果页面需要把所发送的富文本内容展示到前端,可以直接让后端把传过去的内容原封不动的返回到前端(以下为演示) 演示发送,像后端

    2024年02月13日
    浏览(37)
  • 针对织梦cms列表字段内可有可无的显示方法教程

    本教程教大家dedecms文章列表没有缩略图的不显示图片,如果有缩略图就显示缩略图,解决方法在于文章列表文章没有缩略图的不显示图片,然而这个问题只是列表字段内的一个缩略图功能,在后续的问题中,还会出现自定义字段的调用方法、短标题、内容页等,在这里是在

    2024年02月03日
    浏览(40)
  • Vue2显示动态添加表单

    提交方法:  

    2024年02月09日
    浏览(34)
  • vue2文件流下载成功后文件格式错误、打不开、内容缺失

    后端采用文件流的方式将文件信息发送给前端,前端需要接收相应的流信息做出对应的操作,如接收到图片、pdf将进行预览模式,将接收到压缩包形式的则进行文件下载。后端对相应的文件进行不同的传输方式进行传输,前端则需要接收相应的信息并进行操作。 当收到图片、

    2023年04月27日
    浏览(41)
  • 【Vue3/Vue2】判断设备是移动端还是pc端跳转不同路由router

          APP文件中写入js代码 1、首先,通过 isMobile() 函数判断用户的设备类型。该函数使用正则表达式匹配 navigator.userAgent 字符串,以确定用户是在移动设备上访问网页还是在桌面设备上访问网页 2、然后,在 onMounted() 钩子函数中,根据当前的路由路径来判断是否需要进行重定

    2024年01月16日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包