全屏界面自适应

whyczyk

2021-03-15 d60a704e6cbaaae003d67503a72fc0368b861131

 src/components/settingModular.vue

@@ -1,9 +1,10 @@
<template>
  <div class="pageWarp" ref="pageWarp">
    <vue-draggable-resizable :w="item.w" :h="item.h" :x="item.x" :y="item.y" @dragging="onDrag" @dragstop="onDragstop"
      @resizing="onResize" @resizestop="onResizstop" :parent="true" :debug="false" :snap="true" :snapTolerance="5"
      :draggable="draggable" :resizable="resizable" style="transition: none; will-change: transform;"
      @activated="onActived(item)" v-for="(item,i) in nowlayOut.children" :key="i">
      @refLineParams="getRefLineParams" @resizing="onResize" @resizestop="onResizstop" :parent="true" :debug="false"
      :snap="true" :snapTolerance="5" :draggable="draggable" :resizable="resizable" :grid="[10,10]"
      style="transition: none; will-change: transform;" @activated="onActived(item)"
      v-for="(item,i) in nowlayOut.children" :key="i">
      <div @contextmenu.prevent.stop="openMenu(item,$event)" style="width:100%;height:100%;">
        <layout-box :title="item.name">
          <div style="width:100%;height:100%" :id="'layout-box'+item.id" :ref="'layout-box'+item.id"></div>
@@ -12,10 +13,10 @@
    </vue-draggable-resizable>


    <!-- <span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
    <span class="ref-line v-line" v-for="(item,index) in vLine" :key="'vLine'+index" v-show="item.display"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"></span>
    <span class="ref-line h-line" v-for="(item,index) in hLine" :key="'hLine'+index" v-show="item.display"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"></span> -->
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"></span>
    <ul v-show="rightMenuVisible" :style="{left:contextmenuLeft+'px',top:contextmenuTop+'px'}" class="contextmenu">
      <li><i class="el-icon-refresh-right"></i> 重新加载</li>
      <li @click="removeModular"><i class="el-icon-delete"></i> 删除</li>
@@ -25,7 +26,7 @@

<script>
  import Vue from "vue";
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
  import VueDraggableResizable from 'vue-draggable-resizable-gorkys/src/components/vue-draggable-resizable'
  import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
  import LayoutBox from "@/components/LayoutBox";
  let clientWidth, clientHeight;
@@ -73,7 +74,7 @@
      this.$nextTick(() => {
        clientWidth = this.$refs.pageWarp.clientWidth;
        clientHeight = this.$refs.pageWarp.clientHeight;
      })
      });
    },
    methods: {
      // 选中要调整的面板时
@@ -144,14 +145,14 @@
        this.$emit('onDragstop', sendData);
      },
      // 辅助线回调事件
      // getRefLineParams(params) {
      //   const {
      //     vLine,
      //     hLine
      //   } = params
      //   this.vLine = vLine
      //   this.hLine = hLine
      // },
      getRefLineParams(params) {
        const {
          vLine,
          hLine
        } = params;
        this.vLine = vLine
        this.hLine = hLine
      },
      //模块右键菜单打开
      openMenu(clickItem, e) {
        this.clickItem = clickItem;
@@ -212,6 +213,7 @@
  .pageWarp {
    width: 100%;
    height: calc(100% - 52px);
    position: relative;
  }

  .contextmenu {