BUG說明：
鼠標上下方向拖拽，如果松開時鼠標位於懸浮按鈕上會默認執行click事件，經驗證，click事件與mouse事件的執行順序為onmousedown =》onmouseup =》onclick,意味着在click事件執行時會與與其相關的mouse事件沖突。
解決方案：
因為click事件執行時間短，所以利用鼠標拖動的時間差作為標志，在拖拽事件中計算鼠標從onmousedown 到onmouseup 所用的時間差，與200ms作比較，作為全局變量。由於vue的directives自定義指令中無法使用this，所以個人采用給元素設置屬性的方式來解決全局變量的存儲問題。
1、自定義拖拽指令
說明：指令中沒有this關鍵字，指令中通過el可以直接拿到指令綁定的元素;
directives: {
drag: {
// 指令的定義
bind: function (el) {
let odiv = el; //獲取當前元素
let firstTime='',lastTime='';
odiv.onmousedown = (e) => {
document.getElementById('dragbtn').setAttribute('data-flag',false)
firstTime = new Date().getTime();
// 算出鼠標相對元素的位置
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
// 用鼠標的位置減去鼠標相對元素的位置，得到元素的位置
let top = e.clientY - disY;
// 頁面范圍內移動元素
if (top > 0 && top < document.body.clientHeight - 48) {
odiv.style.top = top + 'px';
}
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
// onmouseup 時的時間，並計算差值
lastTime = new Date().getTime();
if( (lastTime - firstTime) < 200){
document.getElementById('dragbtn').setAttribute('data-flag',true)
}
};
};
}
}
},
2、懸浮菜單點擊事件中進行驗證。
click(e) {
// 驗證是否為點擊事件，是則繼續執行click事件，否則不執行
let isClick = document.getElementById('dragbtn').getAttribute('data-flag');
if(isClick !== 'true') {
return false
} //之后都是被阻止的代碼
if (!localStorage.settings) {
return this.$message.error('請選擇必填項並保存');
}
if (this.right === -300) {
this.right = 0;
this.isMask = true;
} else {
this.right = -300;
this.isMask = false;
}
}