fj-dc-ui/.svn/pristine/dc/dc8baa92541455497d33b2685ce6cfb18cfcc13b.svn-base

<!--
<drag v-show="dragVisible" @closeDrag="dragVisible = false"></drag>
refName: ref名字 默认 drag+时间戳
title: 标题 默认"详细信息"
initTop: 初始top 默认"center"居中
initLeft: 初始left 默认"center"居中
initWidth: 初始宽度 默认500
initHeight: 初始高度 默认350
topMin: 距离顶部最小距离 默认0
leftMin: 距离左侧最小距离 默认0
widthMin: 最小宽度 默认300
heightMin: 最小高度 默认200
-->
<template>
  <div
    class="draggableContainer"
    :ref="refName"
    :style="{
            top:initPosition.top + 'px',
            left:initPosition.left + 'px',
            width:initPosition.width + 'px',
            height:initPosition.height + 'px'
        }"
  >
    <div
      class="draggableTitleClass"
      @mousedown="mousedownfun"
    >
      {{title}}
      <i
        @click="closeResult"
        class="draggableClose el-icon-close"
      ></i>
    </div>
    <div
      style="display:flex;flex-direction;column;width:100%;background-color:rgba(255, 255, 255, 0.3);"
      :style="{'height':initPosition.height-31 + 'px'}"
    >
      <div
        @mousedown="mousedown_left"
        class="leftClass"
      ></div>
      <div class="slotClass">
        <slot></slot>
      </div>
      <div
        @mousedown="mousedown_right"
        class="rightClass"
      ></div>
    </div>
    <div
      @mousedown="mousedown_bottom"
      class="bottomClass"
    ></div>
    <img
      style="cursor:se-resize;position: inherit;width: 10px;height: 10px;bottom: 0px;right: 0px;"
      src="/src/assets/img/rightCorner.png"
      @mousedown="rightCornerFun"
      alt="缩放"
    >
  </div>
</template>
<script>
export default {
  props: {
    refName: {
      type: String,
      default: "drag" + new Date().getTime()
    },
    title: {
      type: String,
      default: "详细信息"
    },
    initTop: {
      type: [String, Number],
      default: "center"
    },
    initLeft: {
      type: [String, Number],
      default: "center"
    },
    initWidth: {
      type: Number,
      default: 500
    },
    initHeight: {
      type: Number,
      default: 350
    },
    topMin: {
      type: Number,
      default: 0
    },
    leftMin: {
      type: Number,
      default: 0
    },
    widthMin: {
      type: Number,
      default: 300
    },
    heightMin: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      heightMax: 0,
      widthMax: 0,
      initPosition: {
        top: 0,
        left: 0,
        width: 0,
        height: 0
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.heightMax = window.innerHeight;
      this.widthMax = window.innerWidth;
      if (this.initTop == "center") {
        let top = (this.heightMax - this.initHeight) / 2;
        this.initPosition.top = top > this.topMin ? top : this.topMin;
      } else {
        this.initPosition.top = this.initTop;
      }
      if (this.initLeft == "center") {
        this.initPosition.left = (this.widthMax - this.initWidth) / 2;
      } else {
        this.initPosition.left = this.initLeft;
      }
      this.initPosition.width = this.initWidth;
      this.initPosition.height = this.initHeight;
    },
    closeResult() {
      this.$emit("closeDrag");
    },
    mousedownfun(e) {
      var that = this;
      var el = this.$refs[this.refName];
      var disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTop;
      document.onmousemove = function(e) {
        var left = e.pageX - disx;
        var top = e.pageY - disy;
        if (left <= that.leftMin) {
          left = that.leftMin;
        } else if (left + el.offsetWidth > that.widthMax - 2) {
          left = that.widthMax - el.offsetWidth - 2;
        }
        if (top < that.topMin) {
          top = that.topMin;
        } else if (top + el.offsetHeight > that.heightMax - 2) {
          top = that.heightMax - el.offsetHeight - 2;
        }
        el.style.left = left + "px";
        el.style.top = top + "px";
      };
      document.onmouseup = this.onmouseupNow;
    },
    mousedown_bottom(e) {
      var that = this;
      var el = that.$refs[this.refName];
      document.onmousemove = function(e) {
        if (
          e.pageY - el.offsetTop > that.heightMin &&
          e.pageY < that.heightMax
        ) {
          var height = e.pageY - el.offsetTop;
          that.initPosition.height = height;
        }
      };
      document.onmouseup = this.onmouseupNow;
    },
    mousedown_left(e) {
      var that = this;
      var el = this.$refs[this.refName];
      document.onmousemove = function(e) {
        if (
          e.pageX > that.leftMin &&
          (el.offsetLeft > e.pageX || el.offsetWidth > that.widthMin)
        ) {
          that.initPosition.left = e.pageX;
          that.initPosition.width = el.offsetLeft + el.offsetWidth - e.pageX;
        }
      };
      document.onmouseup = this.onmouseupNow;
    },
    mousedown_right(e) {
      var that = this;
      var el = this.$refs[this.refName];
      document.onmousemove = function(e) {
        if (
          e.pageX - el.offsetLeft > that.widthMin &&
          e.pageX < that.widthMax
        ) {
          var width = e.pageX - el.offsetLeft;
          that.initPosition.width = width;
        }
      };
      document.onmouseup = this.onmouseupNow;
    },
    rightCornerFun(e) {
      var that = this;
      var el = this.$refs[this.refName];
      document.onmousemove = function(e) {
        if (
          e.pageX - el.offsetLeft > that.widthMin &&
          e.pageX < that.widthMax
        ) {
          var width = e.pageX - el.offsetLeft;
          that.initPosition.width = width;
        }
        if (
          e.pageY - el.offsetTop > that.heightMin &&
          e.pageY < that.heightMax
        ) {
          var height = e.pageY - el.offsetTop;
          that.initPosition.height = height;
        }
      };
      document.onmouseup = this.onmouseupNow;
    },
    onmouseupNow() {
      document.onmousemove = document.onmouseup = null;
    }
  }
};
</script>
<style>
.draggableContainer {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
  border-radius: 7px 7px 0px 0px;
  z-index: 10;
  background-color: white;
}
.draggableTitleClass {
  position: relative;
  height: 30px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  color: white;
  background-color: #1862f7;
  background-image: url("/src/assets/img/rough-cloth-light.png");
  cursor: move;
  border-radius: 7px 7px 0px 0px;
}
.bottomClass {
  border-bottom: 2px solid rgb(78, 137, 243);
  cursor: n-resize;
  position: relative;
}
.leftClass {
  border-left: 2px solid rgb(78, 137, 243);
  cursor: w-resize;
}
.rightClass {
  border-right: 2px solid rgb(78, 137, 243);
  cursor: e-resize;
}
.slotClass {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: auto;
  padding-bottom: 2px;
  background-color: white;
}
.draggableClose {
  position: absolute;
  top: calc(50% - 9px);
  right: 10px;
  color: white;
  cursor: pointer;
  font-size: large;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
}
.draggableClose:hover {
  transform: rotate(90deg);
}
</style>