我們利用 Vue.js 的自定義指令能力，來實現一個自定義下拉菜單功能。描述如下：
1基礎版
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">點擊</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>
我們為按鈕綁定了 isShow 變量，當點擊按鈕時，顯示 class="dropDown" 的 div 元素。
js：
Vue.directive('outside-click', { bind: function (el, binding, vnode) { //定義點擊函數 function clickHandler(e) { if (el.contains(e.target)) {//如果點擊區域在所在指令元素內部，則直接返回 return false; } if (binding.expression) {//如果定義了表達式，則執行表達式中的函數 binding.value(e); } } el.vueOutsideClick = clickHandler; document.addEventListener('click', clickHandler);//綁定到 document 的點擊事件 }, 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 中：
unbind 中：
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;}效果：
2 ESC 關閉
現在讓我們做個優化，即在按下鍵盤的 ESC 鍵時，也能關閉下拉菜單。
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 函數中，強化了判斷，如果點擊區域在所在指令元素內部并且沒有按下 ESC 鍵時，才直接返回。即按下 ESC 鍵時，會執行后續操作（執行表達式中的函數）。
在 unbind 函數中，也解綁了 keyup 事件。
效果：
3 ESC 為可選項
我們可以把 ESC 作為可選項，而這可以通過修飾符來實現。
js：
bind: function (el, binding, vnode) { //定義點擊函數 function clickHandler(e) { //是否開啟開關 var escSwitch = (binding.modifiers && binding.modifiers.esc); if (el.contains(e.target)) {//如果點擊區域在所在指令元素內部時 if (escSwitch && e.keyCode === 27) {//帶有了 esc 修飾符，則讓程序往下執行 } else {//直接返回 return false; } } if (binding.expression) {//如果定義了表達式，則執行表達式中的函數 binding.value(e); } } ...}我們通過 binding.modifiers 來判斷自定義指令是否設置了 esc 修飾符，然后以此為基礎，來編寫后續邏輯。
html：
<div id="app" v-cloak> <div class="main" v-outside-click.esc="close"> ... </div></div>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
