铛铛铛铛~先放一张效果图，是一个视频弹窗，可伸缩可拖拽

目录

​

第一步：页面设置

第二步：样式设置

第三步：vue dirctives 自定义drag和open指令配置

---

第一步：页面设置

先设置一个容器，id='popVideoBox'，包括可拖拽的dom(class="open")，可拉dom(class="drag")和视频播放器(vue-aliplayer-v2)

<div class="popVideo" id="popVideoBox" @mousemove.stop="mousemove" @mouseleave.stop="mouseleave">
      <div class="open" v-open></div>
      <div class="drag" v-drag>
        <div class="videoPop">
          <div v-show="replaceIcon" class="videoReplay" @click="changeVideoId">替换</div>
          <div class="closeVideo" @click="close"></div>
        </div>
        <vue-aliplayer-v2 class="aliplayerCon" :source="$store.state.videoPopUrl" ref="popVideo"
                          :options="options"
                          @snapshoted="snapshoted"/>
      </div>
    </div>

第二步：样式设置

ps:将容器和.open,.drag设置position: absolute;

ps:如上图所示，红框表示鼠标可拖动区域；右下角黄色框表示可拉伸的区域

/* 视频弹窗样式 */
.popVideo {
  position: absolute;
  float: left;
  width: 2.22rem;
  height: 1.72rem;
  left: 60%;
  top: 1rem;
  z-index: 9999;
}

.open {
  position: absolute;
  cursor: se-resize;
  height: 0.1rem;
  width: 0.1rem;
  bottom: 0;
  right: 0;
  z-index: 132;

}

.drag {
  position: absolute;
  position: center;
  width: 100%;
  height: 100%;
  padding: 0px;
  z-index: 125;
}

第三步：vue dirctives 自定义drag和open指令配置

下面的代码可以照搬，主要用来计算拖动和哂陀，注意容器id的修改

directives: {
    // 拖拽
    drag(el) {
      var odiv = document.getElementById("popVideoBox")
      el.onmousedown = function (eve) {
        eve = eve || window.event;
        var clientX = eve.clientX;
        var clientY = eve.clientY;
        var odivX = odiv.offsetLeft;
        var odivY = odiv.offsetTop;
        var odivLeft = clientX - odivX;
        var odivTop = clientY - odivY;
        var clientWidth = document.documentElement.clientWidth;
        var oWidth = odiv.clientWidth;
        var odivRight = clientWidth - oWidth;
        var clientHeight = document.documentElement.clientHeight;
        var oHeight = odiv.clientHeight;
        var odivBottom = clientHeight - oHeight;
        document.onmousemove = function (e) {
          //e.preventDefault();
          var left = e.clientX - odivLeft;
          if (left < 0) {
            left = 0
          }
          if (left > odivRight) {
            left = odivRight
          }
          var Top = e.clientY - odivTop;
          if (Top < 0) {
            Top = 0
          }
          if (Top > odivBottom) {
            Top = odivBottom
          }
          odiv.style.left = left + "px";
          odiv.style.top = Top + "px";
        }
        document.onmouseup = function () {
          document.onmouseup = "";
          document.onmousemove = "";
        }
      }
    },
    // 放大缩小
    open: function (el) {
      //当被绑定的元素插入到 DOM 中时 放大缩小
      el.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        var x = e.clientX - el.offsetLeft;
        var y = e.clientY - el.offsetTop;
        document.onmousemove = function (eve) {
          console.log(y)
          console.log(x)
          //设置宽高
          document.getElementById("popVideoBox").style.height = -y + eve.clientY + "px"
          if (document.getElementById("popVideoBox").offsetHeight > document.body.offsetHeight) {
            document.getElementById("popVideoBox").style.height = document.body.offsetHeight + "px"
          } else if (document.getElementById("popVideoBox").offsetHeight < 150) {
            document.getElementById("popVideoBox").style.height = 150 + "px"
          }
          document.getElementById("popVideoBox").style.width = -x + eve.clientX + "px"
          if (document.getElementById("popVideoBox").offsetWidth > document.body.offsetWidth) {
            document.getElementById("popVideoBox").style.width = document.body.offsetWidth + "px"
          } else if (document.getElementById("popVideoBox").offsetWidth < 150) {
            document.getElementById("popVideoBox").style.width = 150 + "px"
          }
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        }
      }
    }
  },