SOURCE

console 命令行工具 X clear

                    
>
console
Vue.directive('anyName', {
    bind:  (el,binding,vnode)=> {
        let fn = ()=>{
            const {value} = binding;
            console.log(binding)
            
        };
    }
})
var app = new Vue({
    el: '#app',
    data: {
        text:'OK'
    },
    methods:{  
        
        
    }
})
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    </style>
  </head>
  <body id="body">
    <div id="out">
      <div id="container" class="container">
          <iframe 
            src="https://www.bilibili.com/" 
            frameborder="0"  
            width="100%" 
            height="100%"
            class="bilibili-frame"
          >
          </iframe>
      </div>
    </div>
  </body>
  <script>
    //  全局页面dom 鼠标移动事件
    let body = document.getElementById("body");
    // 需要调整尺寸的div
    let c = document.getElementById("container");
    //  外层盒子
    let out = document.getElementById("out");
    body.addEventListener("mouseup", up);
    // 绑定调整内部盒子尺寸的事件功能
    bindResize()
    // 外层容器的坐标定位
    let outClient = out.getBoundingClientRect();
    // 是否开启尺寸修改
    let resizeAble = false;
    // 鼠标按下时的坐标,并在修改尺寸时保存上一个鼠标的位置
    let clientX, clientY;
    // div可修改的最小宽高
    let minW = 16;
    let minH = 16;
    // 鼠标按下时的位置,使用n、s、w、e表示 对应(上下左右)
    let direc = "";
    // 鼠标松开时结束尺寸修改
    function up() {
      resizeAble = false;
    }
    function outEnterFn(){
      body.addEventListener("mousemove", move);
      c.addEventListener("mousedown", down);
    }
    function outLeaveFn(){
      body.removeEventListener("mousemove", move);
      c.removeEventListener("mousedown", down);
    }
    function bindResize(){
      out.addEventListener("mouseenter",outEnterFn);
      out.addEventListener("mouseleave", outLeaveFn); 
    }
    function removeResize(){
      out.removeEventListener("mouseenter", outEnterFn);
      out.removeEventListener("mouseleave", outLeaveFn); 
    }
    // 鼠标按下时开启尺寸修改
    function down(e) {
      let d = getDirection(e);
      // 当位置为四个边和四个角时才开启尺寸修改
      if (d !== "") {
        resizeAble = true;
        direc = d;
        clientX = e.clientX;
        clientY = e.clientY;
      }
    }

    // 鼠标移动事件
    function move(e) {
      requestAnimationFrame(()=>{
        let d = getDirection(e);
        let cursor = d === "" ? "default" : d + "-resize";
        // 修改鼠标显示效果
        c.style.cursor = cursor;
        // 检测 待修改元素是否靠近外层盒子
        setResizeBorder(contactDetection(c,outClient));
        // 不可调整大小时 靠近边框的高亮效果取消掉
        if(!resizeAble){
          currentDomMove(e)
        }
        // 当开启尺寸修改时,鼠标移动会修改div尺寸
        if (resizeAble) {
          
          // 鼠标按下的位置在右边,修改宽度
          if (direc.indexOf("e") !== -1) {
            // 未超出外部盒子的边缘时才重新设置宽度
            if (e.clientX < outClient.right) {
              c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + "px";
              clientX = e.clientX;
            } else {
              // 超出后设置可设置的最大值 可以暂时不设置
              c.style.width = outClient.right - c.getBoundingClientRect().left + "px";
            }
            
          }

          // 鼠标按下的位置在上部,修改高度
          if (direc.indexOf("n") !== -1) {
            // 未超出外部盒子的边缘时才重新设置宽度
            if (e.clientY >= outClient.top) {
              let newHeight = Math.max(minH,c.offsetHeight + (clientY - e.clientY));
              // 由于高度的变化只在底部 所以为了显示上部的变化效果 对目标盒子的定位进行计算操作;
              let topNum = Number((c.style.top || "").slice(0, -2));
              // 如果新值与最小值相同 则高度不再变化 也不再移动定位; 仅在不同时 进行赋值操作
              if (newHeight !== minH) {
                c.style.top = topNum + e.clientY - clientY + "px";
                c.style.height = newHeight + "px";
                clientY = e.clientY;
              }
            } else {
              // 超出后设置可设置的最大值 可以暂时不设置
              c.style.height = c.getBoundingClientRect().bottom - outClient.top + "px";
              // 由于高度的变化只在底部 所以为了显示上部的变化效果 对定位进行计算操作;
              c.style.top = "0px";
            }
          }
          // 鼠标按下的位置在底部,修改高度
          if (direc.indexOf("s") !== -1) {
            if (e.clientY <= outClient.bottom) {
              c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + "px";
              clientY = e.clientY;
            } else {
              // 超出后设置可设置的最大值 可以暂时不设置
              console.log(c.getBoundingClientRect().bottom, outClient.top);
              c.style.height = outClient.bottom - c.getBoundingClientRect().top + "px";
            }
          }

          // 鼠标按下的位置在左边,修改宽度
          if (direc.indexOf("w") !== -1) {
            if (e.clientX >= outClient.left) {
              let newWidth = Math.max(minW, c.offsetWidth + (clientX - e.clientX));
              // 由于宽度的变化只在默认表现在右侧 所以为了显示左侧部的变化效果 对目标盒子的定位进行计算操作;
              let leftNum = Number((c.style.left || "").slice(0, -2));
              // 如果新值与最小值相同 则宽度不再变化 也不再移动定位; 仅在不同时 进行赋值操作
              if (newWidth !== minH) {
                c.style.left = leftNum + e.clientX - clientX + "px";
                c.style.width = newWidth + "px";
                clientX = e.clientX;
              }
            } else {
              // 超出后设置可设置的最大值 可以暂时不设置
              c.style.left = c.getBoundingClientRect().right - outClient.left + "px";
              // 由于宽度的变化默认在右侧表现 所以为了显示左侧部的变化效果 对定位进行计算操作;
              c.style.left = "0px";
            }
          }
        }
      })
    }

    // 获取鼠标所在div的位置
    function getDirection(ev) {
      let xP, yP, offset, dir;
      dir = "";
      xP = ev.offsetX;
      yP = ev.offsetY;
      offset = 10;

      if (yP < offset) dir += "n";
      else if (yP > c.offsetHeight - offset) dir += "s";
      if (xP < offset) dir += "w";
      else if (xP > c.offsetWidth - offset) dir += "e";
      return dir;
    }
    // 内外元素接触检测 可控制检测生效范围
    function contactDetection(cDom, outClient) {
      let distance = 8;
      let cDomClient = cDom.getBoundingClientRect();
      let isLeft = cDomClient.left - outClient.left <= distance;
      let isRight = outClient.right - cDomClient.right <= distance;
      let isTop = cDomClient.top - outClient.top <= distance;
      let isBottom = outClient.bottom - cDomClient.bottom <= distance;
      return {
        isLeft,isRight,isTop,isBottom
      }
    }
     
    function setResizeBorder ({
      isLeft,isRight,isTop,isBottom
    }){
      requestAnimationFrame(()=>{
        // 获取上一次的class
        let className = [
          'container',
          isLeft?'left':'',
          isRight?'right':'',
          isTop?'top':'',
          isBottom?'bottom':'',
        ].join(' ');
        // 靠近的样式和边界限定的样式 共同组合
        let moveClass=c.getAttribute("data-class-move");
        c.setAttribute("data-class-resize",className);
        c.className = moveClass + ' ' + className;
      })
    }
    function currentDomMove(ev){
      requestAnimationFrame(()=>{
        ev=ev||window.event;
        let {left,right,top,bottom} = c.getBoundingClientRect();
        let x = ev.clientX;
        let y = ev.clientY;
        // 就是鼠标点与盒子的边界 的距离不超过6;
        let isFromL = (x-left) <= 6 && (left-x) <6
        let isFromR = (right-x) <= 6 && (x-right) <6
        let isFromB= (bottom-y) <= 6 && (y-bottom) <6
        let isFromT = (y-top) <= 6 && (top-y) <6
        let className = [
          'container',
          isFromL?'from-left':'',
          isFromR?'from-right':'',
          isFromB?'from-bottom':'',
          isFromT?'from-top':'',
        ].join(' ');
        // 靠近的样式和边界限定的样式 共同组合
        let resizeClass=c.getAttribute("data-class-resize");
        c.setAttribute("data-class-move", className);
        c.className = resizeClass +' ' + className;
      })
    }
    function currentDomLeave(){
        c.setAttribute("data-class-move", '');
        c.className=c.className.replace('from-left','')
        c.className=c.className.replace('from-right','')
        c.className=c.className.replace('from-top','')
        c.className=c.className.replace('from-bottom','')
        // console.log(c.className)
    }
    function dragDom(dv ,{
      onMouseDown=()=>{},
      onMouseMove =()=>{},
      onMouseUp=()=>{},
      // 边缘检测 获取是否已达上下左右边界
      boundaryDetection=()=>{}
    }){
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let preLeft,preTop;
        let isDown = false;
        let isMoving = false;
        // 鼠标按下事件
        dv.onmousedown = (e) => {
            // 拖动与调整大小互斥,调整大小时不进行拖动操作 
            if(resizeAble) return ;
            onMouseDown()
            // 获取x坐标和y坐标
            x = e.clientX;
            y = e.clientY;

            // 获取左部和顶部的偏移量
            l = dv.offsetLeft;
            t = dv.offsetTop;
            // 开关打开
            isDown = true;
            // 设置样式
            dv.style.cursor = 'move';
        };
        // 鼠标移动
        window.onmousemove = (e) => {
          // 拖动与调整大小互斥,调整大小时不进行拖动操作 
            if (isDown == false||resizeAble) {
                return;
            }
            // 获取x和y
            let nx = e.clientX;
            let ny = e.clientY;
            // 计算移动后的左偏移量和顶部的偏移量
            let nl = nx - (x - l);
            let nt = ny - (y - t);
            isMoving = true;
            // 设置默认值 0值特殊
            preLeft=(preLeft===0||preLeft)?preLeft:nl;
            preTop=(preTop===0||preTop)?preTop:nt;

            let {isLeft,isBottom,isRight,isTop} = boundaryDetection();
            let isToLeft = preLeft-nl>0
            let isToRight = preLeft-nl<0
            let isToTop = preTop-nt>0
            let isToBottom = preTop-nt<0
            // 已经到了一边 并且继续往这个方向拖动时;不再改变偏移量;
            if((isLeft&&isToLeft)||(isRight&&isToRight)){
              nl=preLeft
            }
            if((isTop&&isToTop)||(isBottom&&isToBottom)){
              nt=preTop
            }
            dv.style.left = `${nl}px`;
            dv.style.top = `${nt}px`;
            // 记录本次偏移量 以便下一次偏移时使用
            preLeft=nl
            preTop=nt
            onMouseMove()
        };
        // 鼠标抬起事件
        window.onmouseup = (e) => {
            // 拖动与调整大小互斥,调整大小时不进行拖动操作 
            if(resizeAble) return ;
            if (isMoving) {
                (e || window.event).stopImmediatePropagation();
                (e || window.event).stopPropagation();
            }
            // 开关关闭
            isDown = false;
            isMoving = false;
            dv.style.cursor = 'default';
            onMouseUp()
        };
    };
    dragDom(c,{
      onMouseDown:removeResize,
      onMouseUp:bindResize,
      // 边缘检测
      boundaryDetection:()=>{
        return contactDetection(c,outClient)
      },
      onMouseMove:()=>{
        
      },
    })
  </script>
</html>
 html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #body {
        width: 100%;
        height: 100%;
        padding: 30px;
      }
      #out {
        position: relative;
        box-sizing: border-box;
        width: 90%;
        height: 100%;
        border: 1px solid seagreen;
      }
      .bilibili-frame{
         
      }
      .container {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: 80%;
        padding-top: 20px;
        border: #00cdcd 1px solid;
      }
      .container.top{
        border-top: red 1px solid;
      }
      .container.right{
        border-right: red 1px solid;
      }
      .container.bottom{
        border-bottom: red 1px solid;
      }
      .container.left{
        border-left: red 1px solid;
      }
      .from-top{
        border-top: blue 1px solid;
      }
      .from-right{
        border-right: blue 1px solid;
      }
      .from-bottom{
        border-bottom: blue 1px solid;
      }
      .from-left{
        border-left: blue 1px solid;
      }