移动端横屏提示组件【vue3】移动端横屏需要黑屏并提示“为了更好的体验，请将手机转过来” 如下图所示这里主要参考了一

移动端横屏需要黑屏并提示“为了更好的体验，请将手机转过来” 如下图所示

这里主要参考了一个博主的写法，只是我这里还需要一个特殊的功能，就是需要上传图片的时候去掉这个组件，使其能够竖屏操作调起图片。也就是说，能够中途取消这个横屏提示的，所以在那个博主的基础上添加了isHidden的prop参数来判断是否使用

orient-layer.vue组件（横屏提示组件）

<template>
  <!--竖屏浏览提示-->
  <div id="orientLayer" class="mod-orient-layer">
    <div class="mod-orient-layer_content">
      <div class="mod-orient-layer_desc"></div>
    </div>
  </div>
</template>



<script setup>
import { onMounted,nextTick,defineProps } from 'vue';

//定义参数 已经选中的ITEMID
const props = defineProps({
  isHidden: {
    type: Boolean, //是否改变可以支持竖屏
    default:false
  }
})

onMounted(()=>{
    nextTick(()=>{
        init();
    })
})

const checkDirect=() =>{

  if (document.documentElement.clientHeight >= document.documentElement.clientWidth) {

    return "portrait"
  } else {

    return "landscape"
  }
};

const orientNotice = () => {

  let orientLayer = document.getElementById("orientLayer")
  let orient = checkDirect() //判断是否是竖屏
  if (orient == "portrait") {
    if(!props.isHidden){
      orientLayer.style.display = "block"   //竖屏则展示提示
    }else{
      orientLayer.style.display = "none"
    }
  } else {

    orientLayer.style.display = "none"  
  }
}

const init=()=> {
  orientNotice()
  setTimeout(orientNotice, 300)
  document.addEventListener('DOMContentLoaded', orientNotice, false)
  window.addEventListener('resize', orientNotice, false)
  window.addEventListener('load', orientNotice, false)
}
</script>


<style scoped>
  /*orient tips*/
  .mod-orient-layer {  display: none;  position: fixed;  height: 100%;  width: 100%;  left: 0;  top: 0;  right: 0;  bottom: 0; background:rgba(0,0,0,.9);  z-index: 9997  }
  .mod-orient-layer_content { width: 100%; position:absolute; left:50%; top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%); text-align: center;  }
  .mod-orient-layer_content::after{content:"为了更好的体验，请将手机转过来";text-align:center;font-size:16px;color:#fff;position:absolute;top:50%;left:0;height:30px;width:100%;margin-top:50px;z-index:99999;}
  .mod-orient-layer_content::before{content:"";position:absolute;z-index:99999;height:200px;width:100px;left:50%;top:50%;margin:-140px 0 0 -50px;color:#fff;background-image:url("@/assets/images/orient.png");background-repeat:no-repeat;background-position:center center;background-size:100px auto;}
</style>

使用方法：


<template>
    // 控制isHidden 就能中途取消这个横屏提示
    <orientLayer :isHidden="isHidden"></orientLayer>
    <div> 主要显示内容 </div>
</template>
...

参考博客： vue 移动端横屏提示页面组件开发

移动端 横屏提示组件【vue3】

移动端横屏提示组件【vue3】