如何在vue中解除鼠標(biāo)的監(jiān)聽(tīng)事件

如何在vue中解除鼠標(biāo)的監(jiān)聽(tīng)事件？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1- 首先給父盒子添加 指令:

v-click-outside="hideBox"

2- script標(biāo)簽中 自定義指令

// 自定義指令函數(shù)
const clickOutside = {
 // 初始化指令
 bind (el, binding, vnode) {
  function clickHandler (e) {
   // 這里判斷點(diǎn)擊的元素是否是本身，是本身，則返回
   if (el.contains(e.target)) {
    return false;
   }
   // 判斷指令中是否綁定了函數(shù)
   if (binding.expression) {
    // 如果綁定了函數(shù) 則調(diào)用那個(gè)函數(shù)，此處binding.value就是handleClose方法
    binding.value(e);
   }
  }
  // 給當(dāng)前元素綁定個(gè)私有變量，方便在unbind中可以解除事件監(jiān)聽(tīng)
  el.__vueClickOutside__ = clickHandler;
  document.addEventListener('click', clickHandler);
 },
 update () { },
 unbind (el, binding) {
  // 解除事件監(jiān)聽(tīng)
  document.removeEventListener('click', el.__vueClickOutside__);
  delete el.__vueClickOutside__;
 },
};

3-在export default 中注冊(cè)自定義指令

 // 注冊(cè)自定義指令
 directives: { clickOutside },

4- 最后寫(xiě)上需要恢復(fù)下拉的參數(shù)

 hideBox () {
   this.isSelect = false
   this.selectStatus = false
  },

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

看完上述內(nèi)容，你們掌握如何在vue中解除鼠標(biāo)的監(jiān)聽(tīng)事件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！