VUE-全屏+缩小+拖拽

1、html 代码

<div class="tk" v-show="tkShow" id="tk">
    <h1 class="TKtit" >信息</h1>
    <p class="move"  @mousedown="move">点击此处拖拽</p>
    <div class="menVtb clearFix">
      <span class="suoxiao" @click="narrow"></span>
      <span class="fangda" @click="enlarge"></span>
      <span class="closeBtn"></span>
    </div>
</div

2、JS

    data: function() {
      return {
        positionX: 0,
        positionY: 0,
        flag: false,
        }
     }
// methods添加方法
      // 放大
      enlarge() {
        var dom= document.getElementById('tk')
        if (dom.requestFullscreen) {
          dom.requestFullscreen()
        } else if (dom.mozRequestFullScreen) {
          dom.mozRequestFullScreen()
        } else if (dom.webkitRequestFullscreen) {
          dom.webkitRequestFullscreen()
        } else if (dom.msRequestFullscreen) {
          dom.msRequestFullscreen()
        }
        this.flag= true
      },
      // 缩小
      narrow() {
        if (!this.flag) return
        document.exitFullscreen()
        this.flag= false
      },
      close(){
        this.tkShow = false
      },
      // 拖拽
          move(e) {
      let odiv = e.currentTarget.parentElement;
      // let odiv =e.target
      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft;
      let disY = e.clientY - odiv.offsetTop;
      document.onmousemove = (e) => {       //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        if (left < 0) {
          left = 0
        } else if (left > document.documentElement.clientWidth - odiv.offsetWidth) {
          left = document.documentElement.clientWidth - odiv.offsetWidth
        }
        // 限制拖拽的Y范围，不能拖出屏幕
        if (top < 0) {
          top = 0
        } else if (top > window.innerHeight - odiv.offsetHeight) {
          top = window.innerHeight - odiv.offsetHeight
        }
        //绑定元素位置到positionX和positionY上面
        this.positionX = top;
        this.positionY = left;

        //移动当前元素
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },