h5中的横屏判断与提示，vue组件封装

最新推荐文章于 2024-05-26 15:49:10 发布

胜天一子半

最新推荐文章于 2024-05-26 15:49:10 发布

阅读量1k

点赞数

分类专栏： vue 文章标签：横屏判断与提示

本文链接：https://blog.csdn.net/qq_37942845/article/details/98596613

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

通过 H5新特性 orientationchange 事件判断是否横屏


window.onorientationchange = function () {
    if(window.orientation === 90 || window.orientation === -90){
        alert('横屏了')
    } else {
        alert('没有横屏')
    }
}

在vue中:

<template>
  <div id="app">
    <router-view />
    <div class="prevent-tran" v-show='showPrevent' @touchmove.prevent>
      <img src="https://img-blog.csdnimg.cn/2022010703481639937.png">
      <p>为了您的良好体验<br/>请将手机/平板竖屏操作</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      showPrevent: !1
    }
  },
  created () {
    this.rotate()
    window.onorientationchange = this.rotate
  },
  methods: {
    rotate () {
      if (window.orientation === 90 || window.orientation === -90) {
        this.showPrevent = !0
      } else {
        this.showPrevent = !1
      }
    }
  }
}
</script>

<style scoped>
  .prevent-tran {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(46, 46, 46);
    text-align: center;
    z-index: 99999;
    display: block;
  }
  .prevent-tran img {
    margin: 60px auto 30px;
  }
  .prevent-tran p {
    width: 100%;
    height: auto;
    font-size: 22px;
    color: rgb(98, 98, 98);
    z-index: 999999;
    line-height: 34px;
    text-align: center;
  }
</style>

如果用js写的话：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but dodgem-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
<script>
(function rotate(){
   var orientation=window.orientation;
   var pd = null;
   function createPd(){
       if(document.getElementById('preventTran') === null){
            var imgData = 'https://img-blog.csdnimg.cn/2022010703481639937.png';
            pd = document.createElement('div');
            pd.setAttribute('id','preventTran');
            pd.style.position = 'fixed';
            pd.style.left = '0';
            pd.style.top = '0';
            pd.style.width = '100%';
            pd.style.height = '100%';
            pd.style.overflow = 'hidden';
            pd.style.backgroundColor = '#2e2e2e';
            pd.style.textAlign = 'center';
            pd.style.zIndex = '99999';
            document.getElementsByTagName('body')[0].appendChild(pd);
            var img = document.createElement('img');
            img.src = imgData;
            pd.appendChild(img);
            img.style.margin = '60px auto 30px'
            var br = document.createElement('br');
            var p = document.createElement('p');
            p.style.width = '100%';
            p.style.height = 'auto';
            p.style.fontSize = '22px';
            p.style.color = '#626262';
            p.style.zIndex = 999999;
            p.style.lineHeight = '34px';
            p.style.textAlign = 'center';
            p.innerHTML = '为了您的良好体验';
            p.appendChild(br);
            p.innerHTML += '请将手机/平板竖屏操作';
            pd.appendChild(p);
        }
   }
   if(orientation==90||orientation==-90){
        if(pd == null && document.getElementById('preventTran') === null) createPd();
        document.getElementById('preventTran').style.display = 'block';
   }
   window.onorientationchange=function(){
      if(pd == null && document.getElementById('preventTran') == null) createPd();
      document.getElementById('preventTran').style.display='none';
      rotate();
   };
})();
</script>

最后将其封装成一个组件：

<template>
   <div class="prevent-tran" v-show='showPrevent' @touchmove.prevent>
      <img src="https://img-blog.csdnimg.cn/2022010703481639937.png">
      <p>为了您的良好体验<br/>请将手机/平板竖屏操作</p>
    </div>
</template>

<script>
export default {
  name: 'BasePrevent',
  created () {
    this.rotate()
    window.onorientationchange = this.rotate
  },
  data () {
    return {
      showPrevent: !1
    }
  },
  methods: {
    rotate () {
      if (window.orientation === 90 || window.orientation === -90) {
        this.showPrevent = !0
      } else {
        this.showPrevent = !1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .prevent-tran {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(46, 46, 46);
    text-align: center;
    z-index: 99999;
    display: block;
    img {
      margin: 15px auto 15px;
    }
    p {
      width: 100%;
      height: auto;
      font-size: 18px;
      color: rgb(98, 98, 98);
      z-index: 999999;
      line-height: 26px;
      text-align: center;
    }
  }
</style>

在app.vue中使用

<template>
  <div id="app">
    <router-view />
    <base-prevent/>
  </div>
</template>

<script>
import BasePrevent from '@/components/base/prevent/BasePrevent'
export default {
  name: 'App',
  components: {
    BasePrevent
  }
}
</script>
<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
}
</style>

胜天一子半

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5中的横屏判断与提示，vue组件封装

通过 H5新特性 orientationchange 事件判断是否横屏window.onorientationchange = function () { if(window.orientation === 90 || window.orientation === -90){ alert('横屏了') } else { alert('没有横屏...
复制链接

扫一扫