element vue 点击一边拖拽改变宽度 解决拖动会选中文字的问题

实现效果：

实现代码：

//最外边的这个是放表格容器的div
<div @mousemove="shrinkMove" @mouseup="shrinkUp">
//划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度
	<div id = "resizetable">
	左边表格的div
	</div>
	<div @mousedown="shrinkDown">
	图上拖动条的div
	</div>
</div>
//只写了重要代码
data() {
    return {
	isShrink: false, // 控制是否改变宽度
	}
}
methods: {
shrinkMove(e) {
      document.onselectstart = function() { return false } // 解决拖动会选中文字的问题
      if (this.isShrink) {
      //e.screenX，鼠标的x坐标，设置最小最大宽度以及误差值根据项目需要决定
        const wid = e.screenX - 25 // 误差值
        //划重点：id = "resizetable"--用这个id标识修改哪个容器的宽度
        var resizetable = document.getElementById('resizetable')
        if (wid < 520) {
          resizetable.style.width = 520 + 'px' //最小值
        } else if (this.miningAreaMap.size === 0 && wid > 690) {
          resizetable.style.width = 690 + 'px' //正常时最大值
        } else if (this.miningAreaMap.size > 0 && wid > 820) {
          resizetable.style.width = 820 + 'px' //数据多一列时可拖动的最大值
        } else {
          resizetable.style.width = wid + 'px'  //拖动时的宽度
        }
      }
    },
    shrinkDown(e) {
      document.onselectstart = function() { return false } // 解决拖动会选中文字的问题
      this.isShrink = true
    },
    shrinkUp(e) {
      document.onselectstart = function() { return false } // 解决拖动会选中文字的问题
      this.isShrink = false
    },
}