vue3编写H5适配横竖屏

news/2025/2/15 5:53:32/

具体思路如下:

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;响应拦截器 后台 注解