vue3编写H5适配横竖屏

news/2024/4/17 11:21:21

具体思路如下:

1、监听浏览器屏幕变化,通过监听屏幕宽高,辨别出是横屏,还是竖屏状态

在项目的起始根页面进行监听,我就是在App.vue文件下进行监听

代码如下:

<template><RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'const isMobile = () => {//判断是否为移动端设备return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {// 阻止菜单默认事件,项目不需要就删除这段代码document.oncontextmenu = function (e) {e.preventDefault()}/** 切换横竖屏时重载页面* @rule1 横屏切竖屏* @rule2 竖屏切横屏*/window.addEventListener('resize', () => {let screenWidth = window.innerWidth || document.documentElement.clientWidthlet screenHeight = window.innerHeight || document.documentElement.clientHeightconst rule1 = screenWidth < screenHeight //手机竖屏const rule2 = screenWidth > screenHeight //手机横屏const isMobileX = isMobile() 判断是否为移动端设备if (rule1 && isMobileX) {//手机竖屏// window.location.reload() //重新刷新浏览器,根据项目需求,是否需要刷新整个页面console.log('手机竖屏的宽度', screenWidth)console.log('手机竖屏的高度', screenHeight)} else {//手机横屏// window.location.reload() //重新刷新浏览器,根据项目需求,是否需要刷新整个页面console.log('手机横屏的宽度', screenWidth)console.log('手机横屏的高度', screenHeight)}})
}
onMounted(() => {reloadFn()
})
</script><style scoped></style>

2、把可以区分横屏还是竖屏的字段参数(自定义名字),存储进去vuex /  pinia,方便后续统一更改每个页面适配样式

在pinia 文件的写法如下:

import { defineStore } from 'pinia'
// 屏幕横竖屏适配
export const useStoreScreen = defineStore('screen', {state: () => {return {styleType: 1, // 1手机 2横屏styleTypeClass: '', //  g-mobile竖屏 g-pc横屏scroll: true, // 是否允许滚动indexMaxWidth: '1024', // pc端首页最大宽度(px)maxWidth: '1024' // pc端最大宽度(px)}},getters: {},actions: {changeClass(val: any) {// console.log('styleTypeClass-->', val)this.styleTypeClass = val},changeStyleType(val: any) {this.styleType = val}}
})

3、在App.vue的全局监听添加 pinia 参数字段

代码如下:

<template><RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
// import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
// let { styleTypeClass } = storeToRefs(storeScreen)
const isMobile = () => {//判断是否为移动端设备return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {// 阻止菜单默认事件,项目不需要就删除这段代码document.oncontextmenu = function (e) {e.preventDefault()}/** 切换横竖屏时重载页面* @rule1 横屏切竖屏* @rule2 竖屏切横屏*/window.addEventListener('resize', () => {let screenWidth = window.innerWidth || document.documentElement.clientWidthlet screenHeight = window.innerHeight || document.documentElement.clientHeightconst rule1 = screenWidth < screenHeight //手机竖屏const rule2 = screenWidth > screenHeight //手机横屏const isMobileX = isMobile() 判断是否为移动端设备if (rule1 && isMobileX) {//手机竖屏// window.location.reload() //重新刷新浏览器,根据项目需求,是否需要刷新整个页面storeScreen.changeClass('g-mobile') //设置公共参数,存进pinia,设置竖屏 css (class的自定义名字)console.log('手机竖屏的宽度', screenWidth)console.log('手机竖屏的高度', screenHeight)} else {//手机横屏// window.location.reload() //重新刷新浏览器,根据项目需求,是否需要刷新整个页面storeScreen.changeClass('g-pc') //设置公共参数,存进pinia,设置竖屏 css (class的自定义名字)console.log('手机横屏的宽度', screenWidth)console.log('手机横屏的高度', screenHeight)}})
}
onMounted(() => {reloadFn()
})
</script><style scoped></style>

4、每个页面做好屏幕,横、竖屏两套样式,监听横屏还是竖屏的字段参数,展示出对应的横屏还是竖屏class样式

主要代码如下:

<script lang="ts" setup>
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
let { styleTypeClass } = storeToRefs(storeScreen)
const renewUp = ref(styleTypeClass.value || 'g-mobile') // g-mobile竖屏 g-pc横屏
watch(//监控数据变化() => styleTypeClass.value,(newVal: any, oldVal) => {renewUp.value = newVal // g-mobile竖屏 g-pc横屏}
)
</script>


http://www.ppmy.cn/news/1365065.html

相关文章

Mycat核心教程--Mycat 监控工具【四】

Mycat核心教程--Mycat 监控工具 九、Mycat 监控工具9.1.Mycat-web 简介9.2.Mycat-web 配置使用9.2.1.ZooKeeper 安装【上面有】9.2.2.Mycat-web 安装9.2.2.1.下载安装包9.2.2.2.安装包拷贝到Linux系统/opt目录下&#xff0c;并解压9.2.2.3.拷贝mycat-web文件夹到/usr/local目录…

LVS负载均衡服务器

简介: LVS (Linux Virtual Server):四层路由设备&#xff0c;是由中国人章文松研发的(阿里巴巴的副总裁)根据用户请求的IP与端口号实现将用户的请求分发至不同的主机。 工作原理: LVS工作在一台server上提供Directory(负载均衡器)的功能&#xff0c;本身并不提供服务&#xff…

s-table和columns初始化不完整,造成table文件的filter报错

问题 顺藤摸瓜找errorHandler.js文件 发现文件并没有什么问题 顺藤摸瓜找index.vue文件 首先找到报错的filter&#xff0c;发现与columnsSetting相关 找到columnsSetting发现等于columns 返回自己使用S-table组件的地方&#xff0c;发现columns初始化时仅初始化为ref()未表明…

【web】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…

状态模式(State Pattern)

定义 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许对象在其内部状态改变时改变其行为。这意味着&#xff0c;当对象的状态发生变化时&#xff0c;它的行为也会发生变化。状态模式特别适用于行为依赖于其状态的对象&#xff0c;而且当这…

猫头虎分享已解决Bug || Error: Minified React error #130

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

【数据库】mybatis使用总结

文章目录 1. 批量插入、检索<foreach>2. <if> 判断等于情况3. 模糊查询(pgsql为例)4. 分页5. <resultMap > 中collection 和association 1. 批量插入、检索<foreach> <insert id"insertSystemService" >insert into SYSTEMINFO_SER…

ruoyi框架学习

RBAC模型 数据字典 拦截器 token没有&#xff0c;submit&#xff0c;request.js中&#xff0c;前端前置拦截器&#xff0c;响应拦截器 后台 注解

nginx概述

文章目录 nginx特点安装操作使用systemctl管理的操作使用源码包安装的操作 nginx源码 nginx特点 反向代理 反向代理服务器需要能处理大量并发连接。Nginx就可以&#xff0c;所以Nginx适合做反向代理服务器 负载均衡动静分离 Nginx实例处理大并发&#xff0c;时候做作为静态服务…

[C++]C++实现本地TCP通讯的示例代码

这篇文章主要为大家详细介绍了C如何利用TCP技术,实现本地ROS1和ROS2的通讯,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下 概要服务端代码 头文件源代码客户端代码 概要 利用TCP技术&#xff0c;实现本地ROS1和ROS2的通讯。 服务端代码 头文件 #include &…

golang的反射探索

1、golang中反射常用的场景 1》类型检查—通用类包或者函数的时候&#xff0c;在运行时可以动态的获取任意对象的类型信息 2》动态调用方法—运行时动态的选择使用哪个方法 3》结构体标签处理—结构体字段一般是通过tag来注解。运行时可以通过反射读取tag。常用于解析配置文件&…

project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, string

家人们&#xff0c;遇到了一个新的报错 于是从网上找了各种方法&#xff0c;有说把开发者工具关闭重启的&#xff0c;有说开发者工具下载重新下载的&#xff0c;有说开发者工具路径安装得在C盘的&#xff0c;均没有效果 解决方法&#xff1a; 1、运行项目&#xff0c;在开发者…

OSX逆向分析基础

文章目录 前言OSX基础工具方法动态调试附录参考链接 前言 如果你想真正成为软件高手&#xff0c;就得了解底层运作机制。逆向&#xff0c;不会让你成为扎克伯格或张一鸣&#xff0c;但或许能让你成为安全专家。 OSX基础 Mac OS X下二进制可执行文件的动态链接库是dylib文件。…

Flink Catalog

1.Flink侧创建 按照SQL的解析处理流程在Parse解析SQL以后&#xff0c;进入执行流程——executeInternal。   其中有个分支专门处理创建Catalog的SQL命令 } else if (operation instanceof CreateCatalogOperation) {return createCatalog((CreateCatalogOperation) operatio…

通过一个例子演示golang调用C语言动态链接库中的函数

本例提供了cgo调用C函数的示例&#xff0c;也演示了如何将C函数打印内容保存到golang的变量中 目录和源码 目录结构 adminhpc-1:~/go/my_stdout$ tree . ├── include │ ├── mylibrary.c │ └── mylibrary.h ├── lib └── main.go2 directories, 3 files a…

Android 框架设计模板

不同项目在使用该模板时多少会有出入&#xff0c;应以项目实际情况作为依据。 &#xff08;该文档可以 .md 格式存放于项目根目录&#xff0c;或编写到readme 中&#xff09; 项目描述 涉及如下方面 项目背景 &#xff08;可引用项目立项书&#xff09;项目需求 &#xff08…

【kubernetes】关于k8s集群的声明式管理资源

目录 一、声明式管理方法 二、资源配置清单管理 1、导出资源配置清单 2、修改资源配置清单并应用 2.1离线修改 2.2在线修改 三、通过资源配置清单创建资源对象 获取K8S资源配置清单文件模板&#xff1f; 关于配置清单常见的字段 方案一&#xff1a;手写yaml配置文件 …

QT C++实践|超详细数据库的连接和增删改查操作|附源码

0&#xff1a;前言 &#x1faa7; 什么情况需要数据库? 1 大规模的数据需要处理&#xff08;比如上千上万的数据量&#xff09;2 需要把数据信息存储起来&#xff0c;无论是本地还是服务上&#xff0c;而不是断电后数据信息就消失了。 如果不是上面的原因化&#xff0c;一般…

学习JAVA的第四天(基础)

目录 方法 方法的定义 方法的调用 参数 注意事项 方法的重载 练习 面向对象 类和对象 定义类的注意事项 封装 private关键字 this关键字 构造方法 标准的Javabean类 创建一个对象时&#xff0c;虚拟机做了什么&#xff1f; 方法 方法含义&#xff1a;方法是程序…

Node.js+vue校内二手物品交易系统tdv06-vscode前后端分离

二手物品交易系统采用B/S架构&#xff0c;数据库是MySQL。网站的搭建与开发采用了先进的nodejs进行编写&#xff0c;使用了vue框架。该系统从三个对象&#xff1a;由管理员和用户、店铺来对系统进行设计构建。主要功能包括&#xff1a;个人信息修改&#xff0c;对用户、店铺、二…
最新文章