淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

發(fā)布時(shí)間：2020-09-30 21:18:58 來(lái)源：腳本之家閱讀：159 作者：deniro 欄目：web開發(fā)

我們利用 Vue.js 的自定義指令能力，來(lái)實(shí)現(xiàn)一個(gè)自定義下拉菜單功能。描述如下：

點(diǎn)擊按鈕，彈出下拉菜單。
點(diǎn)擊下拉菜單之外的區(qū)域，關(guān)閉下拉菜單。

1基礎(chǔ)版

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>

  <div id="app" v-cloak>
    <div class="main" v-outside-click="close">
      <button @click="isShow=!isShow">點(diǎn)擊</button>
      <div class="dropDown" v-show="isShow">
        <p>零售新物種：藥店和便利店合體之后</p>
      </div>
    </div>
  </div>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>

</body>
</html>

我們?yōu)榘粹o綁定了 isShow 變量，當(dāng)點(diǎn)擊按鈕時(shí)，顯示 class="dropDown" 的 div 元素。

js：

Vue.directive('outside-click', {
  bind: function (el, binding, vnode) {
    //定義點(diǎn)擊函數(shù)
    function clickHandler(e) {
      if (el.contains(e.target)) {//如果點(diǎn)擊區(qū)域在所在指令元素內(nèi)部，則直接返回
        return false;
      }
      if (binding.expression) {//如果定義了表達(dá)式，則執(zhí)行表達(dá)式中的函數(shù)
        binding.value(e);
      }
    }

    el.vueOutsideClick = clickHandler;
    document.addEventListener('click', clickHandler);//綁定到 document 的點(diǎn)擊事件
  },
  unbind: function (el, binding, vnode) {
    document.removeEventListener('click', el.vueOutsideClick);//解綁
    delete el.vueOutsideClick;//銷毀
  }

});

var app = new Vue({
  el: '#app',
  data: {
    isShow: false
  },
  methods: {
    close: function () {
      this.isShow = false;
    }
  }
});

bind 中：

首先在定義了點(diǎn)擊函數(shù)，內(nèi)部邏輯為：如果點(diǎn)擊區(qū)域在所在指令元素內(nèi)部，則直接返回；如果定義了表達(dá)式，則執(zhí)行表達(dá)式中的函數(shù)（示例中是 close）。
這里用到了 contains 函數(shù)， A.contains(B) 是判斷元素 A 是否包含了元素 B。
接著在 el 中定義了一個(gè)變量，用于存放剛才定義的點(diǎn)擊函數(shù)。bind() 與 unbind() 通過(guò) el 變量進(jìn)行參數(shù)傳遞。
然后綁定到 document 的點(diǎn)擊事件。

unbind 中：

解綁在 bind 中綁定的點(diǎn)擊事件。
銷毀該變量。

css：

[v-cloak] {
  display: none;
}

.main {
  width: 125px;
}

button {
  display: block;
  width: 100%;
  color: #ffffff;
  background-color: #99CC66;
  border: 0;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  outline: none;
}

button:active {
  top: 1px;
  left: 1px;
}

.dropDown {
  width: 100%;
  height: 150px;
  margin: 5px 0;
  font-size: 12px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.dropDown p {
  display: inline-block;
  padding: 6px;
}

效果：

淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

2 ESC 關(guān)閉

現(xiàn)在讓我們做個(gè)優(yōu)化，即在按下鍵盤的 ESC 鍵時(shí)，也能關(guān)閉下拉菜單。

js：

bind: function (el, binding, vnode) {
  function clickHandler(e) {
    if (el.contains(e.target) && e.keyCode !== 27) {
      return false;
    }
    ...
  }

  ...
  document.addEventListener('keyup', clickHandler, false);//綁定鍵盤事件
},
unbind: function (el, binding, vnode) {
    ...
  document.removeEventListener('keyup', el.vueOutsideClick);//解綁
  ...
}

在 bind 函數(shù)中，強(qiáng)化了判斷，如果點(diǎn)擊區(qū)域在所在指令元素內(nèi)部并且沒(méi)有按下 ESC 鍵時(shí)，才直接返回。即按下 ESC 鍵時(shí)，會(huì)執(zhí)行后續(xù)操作（執(zhí)行表達(dá)式中的函數(shù)）。

在 unbind 函數(shù)中，也解綁了 keyup 事件。

效果：

淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

3 ESC 為可選項(xiàng)

我們可以把 ESC 作為可選項(xiàng)，而這可以通過(guò)修飾符來(lái)實(shí)現(xiàn)。

js：

bind: function (el, binding, vnode) {
  //定義點(diǎn)擊函數(shù)
  function clickHandler(e) {

    //是否開啟開關(guān)
    var escSwitch = (binding.modifiers && binding.modifiers.esc);

    if (el.contains(e.target)) {//如果點(diǎn)擊區(qū)域在所在指令元素內(nèi)部時(shí)
      if (escSwitch && e.keyCode === 27) {//帶有了 esc 修飾符，則讓程序往下執(zhí)行
      } else {//直接返回
        return false;
      }
    }
    if (binding.expression) {//如果定義了表達(dá)式，則執(zhí)行表達(dá)式中的函數(shù)
      binding.value(e);
    }
  }

  ...
}

我們通過(guò) binding.modifiers 來(lái)判斷自定義指令是否設(shè)置了 esc 修飾符，然后以此為基礎(chǔ)，來(lái)編寫后續(xù)邏輯。

html：

<div id="app" v-cloak>
  <div class="main" v-outside-click.esc="close">
    ...
  </div>
</div>

本文示例代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽