landscape-prompt/landscape-prompt.vue

  1. <template>
  2.     <div class="vm-landscape-prompt" v-if="isMobile">
  3.         <div class="orient-layer mod-orient-layer">
  4.             <div class="mod-orient-layer-content">
  5.                 <i class="icon mod-orient-layer-icon-orient"></i>
  6.                 <div class="mod-orient-layer-desc">请在解锁模式下使用竖屏浏览</div>
  7.             </div>
  8.         </div>
  9.     </div>
  10. </template>
  11. <style lang="scss">
  12.     @import "landscape-prompt.scss";
  13. </style>
  14. <script type="text/javascript">
  15.   /**
  16.    * @component LandscapePrompt
  17.    * @description
  18.    *
  19.    * ## 横屏提示组件 / LandscapePrompt组件
  20.    *
  21.    * ### 说明
  22.    *
  23.    * 组件在手机横屏的时候给出提示，提示用户H5需要在竖屏模式浏览。使用CSS的media参数如下：
  24.    *
  25.    * ```
  26.    * min-aspect-ratio: 13 / 9
  27.    * ```
  28.    *
  29.    * */
  30.   import isMobile from '../../util/mobile'
  32.   export default {
  33.     name: 'LandscapePrompt',
  34.     data () {
  35.       return {
  36.         // 不是mobile时, 不启用这个组件
  37.         isMobile: isMobile // 是否为移动终端
  38.       }
  39.     }
  40.   }
  41. </script>