vue监听鼠标移动事件onmousemove卡顿问题

Question

如图，第一次移动没问题，第二次点击鼠标后移动就卡了，得松开鼠标才能移动。以后有时候卡有时候不卡，请问这是怎么回事？

---

代码：

• UI.vue

<template>
  <div class="ui">
    <!--控件面板-->
    <comp-panel class="comp-panel"></comp-panel>
    <!--设计面板-->
    <design-panel class="design-panel"></design-panel>
    <!--属性面板-->

  </div>
</template>
<script>
  import CompPanel from '@/components/CompPanel.vue'
  import DesignPanel from '@/components/DesignPanel.vue'
  import Bus from '@/components/bus'
  export default{
    components:{
      CompPanel,
      DesignPanel,
    },
    data(){
      return{

      }
    },
    mounted(){
      document.onmouseup=(e)=>{
        console.log('全局松开鼠标')
        this.$global.mouseDownStatus=0;

//        document.onmouseup=null;
        Bus.$emit('mouseUp',e);
      };
      document.onmousedown=(e)=>{
        console.log('全局点击鼠标')
        this.$global.mouseDownStatus=1;
        Bus.$emit('mouseDown',e);

      };
    }
  }
</script>
<style scoped>
  .ui{
    position: absolute;
  }
  .comp-panel{
    width: 250px;
    height: calc(100vh - 20px);
    position: absolute;
    /*border-right: 1px solid black;*/
  }
  .design-panel{
    position: absolute;
    width: calc(50vw);
    height: calc(100vh);

    left: 300px;

  }
</style>

• CompPanel.vue

<!--控件面板-->
<template>
  <div class="comp-panel">
    <div class="comp-item" v-for="comp in comp_list">
      {{comp}}
    </div>
    <!--拖动显示-->
    <div class="comp-item-active" v-show="moveShow" ref="push">
      {{pushText}}
    </div>
  </div>
</template>
<script>
  import Bus from '@/components/bus'
  export default{
    data(){
      return{
        comp_list:[
          '单选框',
          '多选框',
          '单行文本框',
          '多行文本框'
        ],
        moveShow:false,
        pushText:'',
        time:null,
        disX:0,
        disY:0,
      }
    },
    mounted(){
      Bus.$on('mouseUp',e=>{
        document.onmousemove=null;
        this.moveShow=false;
      });
      Bus.$on('mouseDown',e=>{
        console.log('mouseDown');
        let odiv=e.target;
        //鼠标相对元素的位置
        let disX=e.clientX-odiv.offsetLeft;
        let disY=e.clientY-odiv.offsetTop;
        this.disX=disX;
        this.disY=disY;
        let left=e.clientX-disX;
        let top=e.clientY-disY;
        //移动当前元素
        this.$refs.push.style.left=left+'px';
        this.$refs.push.style.top=top+'px';
        console.log(odiv.offsetWidth,odiv.offsetHeight);
        this.$refs.push.style.width=odiv.offsetWidth+'px';
        this.$refs.push.style.height=odiv.offsetHeight+'px';
        this.pushText=odiv.innerText;
        this.moveShow=true;

        document.onmousemove=(e)=>{//鼠标按下并移动的事件
          if(this.$global.mouseDownStatus===1){
            console.log('开始移动');
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            left=e.clientX-disX;
            top=e.clientY-disY;
            this.$refs.push.style.left=left+'px';
            this.$refs.push.style.top=top+'px';
          }
        };
      });
    },
  }
</script>
<style scoped>
  .comp-panel{
    /*width: 100%;*/
    /*height: 100%;*/
    /*background-color: #e0e0e0;*/
    position: absolute;
    border: 1px solid #e0e0e0;
  }
  .comp-item{
    background-color: #f4f6fc;
    margin: 5px;
    color: #2c3e50;
    font-size: 14px;
    padding: 3px;
    cursor: grab;
  }
  .comp-item:hover{
    background-color: #337AB7;
    color:white;
  }
  .comp-item-active{
    width: 30px;
    height: 30px;
    background-color: #337AB7;
    position: absolute;
    color:white;
    opacity: 0.8;
    /*padding: 3px;*/
    font-size: 14px;
  }

</style>

• DesignPanel.vue

<!--设计面板-->
<template>
  <div class="design-panel">
    <div class="cursor-div" v-if="cursor"></div>
  </div>

</template>
<script>
  import Bus from '@/components/bus'
  export default{
    data(){
      return{
        cursor:false,
        mouseDown:false,
        mouseUp:true,
      }
    },
    methods:{
      mouseover(){
        if(this.$global.mouseDownStatus===1){
          this.cursor=true;
        }
      },
      mouseout(){
        this.cursor=false;
      },
//      mouseup(){
//        this.cursor=false;
//      }
    }
  }
</script>
<style scoped>
  .design-panel{
    border: 1px solid #e0e0e0;
  }
  .cursor-div{
    position: relative;
    height: 2px;
    width: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #337ab7;
  }
  .cursor-div:before{
    content: "";
    position: absolute;
    display: inline-block;
    top: -3px;
    left: -5px;
    width: 0px;
    height: 0px;
    border-left: 4px solid transparent;
    border-right: 4px solid #337ab7;
    border-top: 4px solid #337ab7;
    border-bottom: 4px solid transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
  }
  .cursor-div:after{
    content: "";
    position: absolute;
    display: inline-block;
    top: -3px;
    right: -5px;
    width: 0px;
    height: 0px;
    border-left: 4px solid transparent;
    border-right: 4px solid #337ab7;
    border-top: 4px solid #337ab7;
    border-bottom: 4px solid transparent;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    z-index: 1;
  }
</style>

Answer 1

解决了，因为拖动的时候有时候会选中文字，再次拖动就会出现禁止符号影响鼠标移动事件的监听
在css里加上了文字不可选中，解决了

• 选中文字拖动会出现禁止符号

• 文字不可选中

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;