vue 如何让页面横屏展示内容（使用tranform）

最新推荐文章于 2024-07-10 10:41:37 发布

柒染染呀

最新推荐文章于 2024-07-10 10:41:37 发布

阅读量2.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43818906/article/details/127966034

版权

在mounted调用此方法即可

一些数据没有但不影响视线横屏效果，话不多说，上代码！！！

html代码：

<template>
  <div class="showbarcode" ref="view" v-if="isshow" @click="goBack">
    <div class="showTips">
      付款码数字仅用于当面支付时想收银员初始，请告知他人，谨防诈骗！
    </div>
    <div v-if="orderNo" class="bar-out">
      <svg id="barcodebig"></svg>
    </div>
    <div class="num" v-if="orderNo">
      {{ orderNo | formatCard }}
    </div>
  </div>
</template>

js代码

mounted(){
this.resizeScreen();
},
methods:{
 resizeScreen() {
      const _this = this;
      // 利用 CSS3 旋转 对根容器逆时针旋转 90 度
      const detectOrient = function() {
        let width = document.documentElement.clientWidth,
          height = document.documentElement.clientHeight,
          $wrapper = _this.$refs.view, // 这里是页面最外层元素
          style = "";
        if (width >= height) {
          console.log("横屏!!!!!")
          // 横屏
          style += "width:" + width + "px;"; // 注意旋转后的宽高切换
          style += "height:" + height + "px;";
          style += "-webkit-transform: rotate(0); transform: rotate(0);";
          style += "-webkit-transform-origin: 0 0;";
          style += "transform-origin: 0 0;";
        } else {
          console.log("竖屏!!!!!")

          // 竖屏
          style += "width:" + height + "px;";
          style += "height:" + width + "px;";
          style +=
            "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
          // 注意旋转中点的处理
          style +=
            "-webkit-transform-origin: " +
            width / 2 +
            "px " +
            width / 2 +
            "px;";
          style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
        }
        console.log("style",style)
        $wrapper.style.cssText = style;
      };
      window.onresize = detectOrient;
      detectOrient();
    },
}