vue 移动端 横屏提示 页面 组件开发

vue 移动端 横屏提示 页面 组件开发

在移动端开发的时候，可能会出现只在横屏状态下展示的情况，如图：

下面将对此页面抽离成为一个公共组件：

1.建立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) {