移动端横屏展示&横屏展示的BUG

小小佩奇

于 2024-08-07 10:06:00 发布

阅读量221

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_62566850/article/details/140978971

版权

使用el-dialog横屏展示需要添加 fullscreen 是否全屏，要不然在有的手机上面只有半屏

// 横屏展示的Bug

// 解决Bug的效果

// html
<el-dialog
      :style="style"
      class="eldialog"
      :visible.sync="dialogVisibleOrder"
      width="100%"
      :before-close="handleCloseOrder"
      :fullscreen="dialogVisibleOrder"
    >
      <Table5
        :tableData="orderTableListDetail"
        :viewType="viewType"
        isType="2"
        :flagTime="flagTime"
        :timeDate="timeDate"
        :loading="loadingTableDetail"
      />
 </el-dialog>

// data
data(){
    
    return {
      style: {
        "--width": document.documentElement.clientWidth / 82.8 + "rem"
      },
    }
    
 }


// css

.eldialog {
  height: 100vw;
  width: 100vh;
  transform: rotate(90deg);
  transform-origin: var(--width) var(--width);

  ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
    overflow-x: auto;
  }
}

::v-deep .el-dialog {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}