vue3编写H5适配横竖屏 |
您所在的位置：网站首页 › 苹果控制横屏竖屏的功能 › vue3编写H5适配横竖屏 |
vue3编写H5适配横竖屏
|
具体思路如下： 1、监听浏览器屏幕变化，通过监听屏幕宽高，辨别出是横屏，还是竖屏状态 在项目的起始根页面进行监听，我就是在App.vue文件下进行监听
代码如下： 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.clientWidth let screenHeight = window.innerHeight || document.documentElement.clientHeight const 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() })2、把可以区分横屏还是竖屏的字段参数（自定义名字），存储进去vuex / pinia,方便后续统一更改每个页面适配样式 在pinia 文件的写法如下：
3、在App.vue的全局监听添加 pinia 参数字段 代码如下： 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.clientWidth let screenHeight = window.innerHeight || document.documentElement.clientHeight const 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() })4、每个页面做好屏幕，横、竖屏两套样式，监听横屏还是竖屏的字段参数，展示出对应的横屏还是竖屏class样式
主要代码如下： 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横屏 } ) |
【本文地址】