hanbaoshan
2020-07-31 13514e95ffc45c976806e8e752adb42e0c47052f
src/pages/desktop/index/components/DFrame.vue
@@ -36,7 +36,9 @@
    return {
      fullScreen: false,
      width: this.data.width || 1024,
      height: this.data.height || 512
      height: this.data.height || 512,
      dragLock: false,
      resizeLock: false
    }
  },
  mounted() {
@@ -80,7 +82,12 @@
  },
  directives: {
    drag(el) {
      if(el.dragLock){
        return
      }
      el.onmousedown = function (e) {
        el.dragLock = true;
        let disx = e.clientX - el.parentElement.offsetLeft;
        let disy = e.clientY - el.parentElement.offsetTop;
        el.style.cursor = 'move';
@@ -90,13 +97,18 @@
          el.parentElement.style.top = e.clientY - disy + 'px';
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = void 0;
          el.dragLock = false;
          document.onmousemove = document.onmouseup = null;
          el.style.cursor = 'unset';
        };
      }
    },
    resize(el, binding, vnode) {
      if(el.resizeLock){
        return;
      }
      el.onmousedown = function (e) {
        el.resizeLock = true;
        let disx = e.clientX;
        let disy = e.clientY;
        let disw = vnode.context.width;
@@ -108,7 +120,8 @@
          vnode.context.height = dish + e.clientY - disy;
        };
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = void 0;
          el.resizeLock = false;
          document.onmousemove = document.onmouseup = null;
          el.style.cursor = 'unset';
        };
      }
@@ -195,7 +208,7 @@
  width: 100%;
  height: calc(100% - 30px);
  border-radius: 0 0 4px 4px;
  background-color: azure;
  background-color: #fff;
}
.d-frame-content iframe {
@@ -210,7 +223,8 @@
  right: 0;
  width: 15px;
  height: 15px;
  z-index: 100;
  z-index: 1000;
  cursor: nwse-resize;
  background: url("/images/resize.png") no-repeat;
}
</style>