zoukankan      html  css  js  c++  java
  • 竖版

    竖版:

    1. 根据依赖引入tools工具,github地址:https://github.com/chen8000/toolsJs/blob/master/index.js

    app.vue代码

    <template>
      <div
        id="app"
        :style="appWH"
        :class="{shu:shu}"
      >
        <!-- 页面 -->
        <Pages />
    
      </div>
    </template>
    
    <script>
    import Pages from "./pages";
    import { HS, remJs, getBodyWH } from "@/tools";
    export default {
      name: "app",
      components: {
        Pages
      },
      data() {
        return {
          appWH: null, // 动态设置宽高
          shu: false, // 动态添加class
          w: 0, // 盒子的宽度
          h: 0, // 盒子的高度
        };
      },
      created() {
       remJs(640); this.Hav(); // 初始化盒子宽高 this.setWH(); // 动态设置盒子的宽高 }, methods: { Hav() { HS(t => { this.setWH(); if (t) { // 横屏 this.shu = true; } else { // 竖屏 this.shu = false; } }); }, setWH() { setTimeout(() => { let bodyWH = getBodyWH(); this.w = bodyWH.width; this.h = bodyWH.height; if (bodyWH.width > bodyWH.height) { this.w = bodyWH.height; this.h = bodyWH.width; } this.appWH = { this.w + "px", height: this.h + "px" }; }, 150); }, } }; </script> <style lang="scss" scoped> @import "~@/assets/styles/com.scss"; #app { @include wh(100%, 100%); @include LTRBcenter; } .shu { transform: translate(-50%, -50%) rotate(-90deg) !important; } </style>
  • 相关阅读:
    【YbtOJ#911】欧拉函数
    【CF590E】Birthday
    打印控件的区别
    RPA教程
    UiPath培训教程
    RPA视频教程
    搭建samba服务
    kvm虚拟机在线扩容
    zabbix监控交换机
    UiPath Level3讲解
  • 原文地址:https://www.cnblogs.com/chefweb/p/10831166.html
Copyright © 2011-2022 走看看