解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題
功能描述：
如圖，右側懸浮菜單按鈕，只支持上下方向拖動，點擊時展開或關閉菜單。
BUG說明：
鼠標上下方向拖拽，如果松開時鼠標位于懸浮按鈕上會默認執(zhí)行click事件，經(jīng)驗證，click事件與mouse事件的執(zhí)行順序為onmousedown =》onmouseup =》onclick,意味著在click事件執(zhí)行時會與與其相關的mouse事件沖突。
解決方案：
因為click事件執(zhí)行時間短，所以利用鼠標拖動的時間差作為標志，在拖拽事件中計算鼠標從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) {
// 驗證是否為點擊事件，是則繼續(xù)執(zhí)行click事件，否則不執(zhí)行
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;
}
},
補充知識：vue 子組件 created 方法不執(zhí)行問題
近期做了一個項目 里面有一個樹形菜單，將數(shù)據(jù)寫在 js （死數(shù)據(jù)）中,所有的東西都能夠正常執(zhí)行（i 標簽，子節(jié)點，父節(jié)點），但是當在請求接口文件或者請求后臺數(shù)據(jù)的時候，發(fā)現(xiàn)引入的子組件的created方法不執(zhí)行，但是點擊父級菜單展開時還是能夠觸發(fā)，后來發(fā)現(xiàn) 是生命周期的問題，仔細查看一下，后來解決！
解決方法如下：
用watch 檢測一下data的數(shù)據(jù)變化，created方法既然在點擊的時候執(zhí)行，所以也必須保留，好啦，就這樣！
以上這篇解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
antd?select?多選限制個數(shù)的實現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個數(shù),實現(xiàn)思路和核心代碼都很簡單，其中核心代碼在于disabled，代碼簡單易懂需要的朋友可以參考下2022-11-11
vue-cli自定義創(chuàng)建項目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,在創(chuàng)建項目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
props 主要用于父組件向子組件通信,再父組件中通過使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
今天小編就為大家分享一篇vue獲取data數(shù)據(jù)改變前后的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了vuecli4配置sass與less詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Vue調用PC攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了element-ui select多選綁定回顯值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)商城購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11