横屏显示插件

效果预览

pc端浏览器模拟

​ 移动端实际显示

1. 组件实现

在components下创建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>
export default {

  mounted(){
    this.init()
  },

  methods:{

    checkDirect() {
      if (document.documentElement.clientHeight >= document.documentElement.clientWidth) {
        return "portrait"
      } else {
        return "landscape" 
      }
    },

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

    init() {
      this.orientNotice()
      setTimeout(this.orientNotice, 300)
      document.addEventListener('DOMContentLoaded', this.orientNotice, false)
      window.addEventListener('resize', this.orientNotice, false)
      window.addEventListener('load', this.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/orient.png");
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100px auto;
  }
</style>

其中图片url（“../assets/orient.png”）文件如下，供下载参考。

2. 组件引用

在实际使用页面文件（如实践过程中需求设计为：login页面登录成功后跳转的home页面提示用户横屏，即Home.vue）中引用并使用插件。

其中关键代码为line.5、 line.12 、 line.14 。

<template>
  <el-container class="home-container">
    <el-container>
        <!-- orient-layer 使用 -->
        <orient-layer></orient-layer> 
    </el-container> 
  </el-container>
</template>

<script>
// orient-layer 引入 
import orientLayer from "@/components/orient-layer"
export default {
  components: {orientLayer},
  data () {
    return {
      // ...
    }
  },
  created () {
    // ...
  },
  methods: {
    // ...
    }
  }
}
</script>

<style lang="less" scoped>
	// ...
</style>