溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在vue中解除鼠標的監聽事件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1- 首先給父盒子添加 指令:
v-click-outside="hideBox"
2- script標簽中 自定義指令
// 自定義指令函數
const clickOutside = {
// 初始化指令
bind (el, binding, vnode) {
function clickHandler (e) {
// 這里判斷點擊的元素是否是本身，是本身，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數
if (binding.expression) {
// 如果綁定了函數 則調用那個函數，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當前元素綁定個私有變量，方便在unbind中可以解除事件監聽
el.__vueClickOutside__ = clickHandler;
document.addEventListener('click', clickHandler);
},
update () { },
unbind (el, binding) {
// 解除事件監聽
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};3-在export default 中注冊自定義指令
// 注冊自定義指令
directives: { clickOutside },4- 最后寫上需要恢復下拉的參數
hideBox () {
this.isSelect = false
this.selectStatus = false
},Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
看完上述內容，你們掌握如何在vue中解除鼠標的監聽事件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
