我们利用Vue.js的自定义指令能力，来实现一个自定义下拉菜单功能。描述如下：

点击按钮，弹出下拉菜单。点击下拉菜单之外的区域，关闭下拉菜单。1基础版

html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title link rel='样式表type=' text/CSS ' href=' style。CSS ' rel='外部无跟随'/头体div id=' app ' v-斗篷div class=' main ' v-outer-click=' close '按钮@ click=' isShow=！'' isShow '点击/button div class=' DrOp ' v-show=' IsShow ' p零售新物种：药店和便利店合体之后/p/div/div脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script script src=' http :索引。js '/脚本/正文/html我们为按钮绑定了是否显示变量，当点击按钮时，显示class=' DrOp '的差异元素。

js:

vue。指令(' external-click '，{ bind:函数(el，binding，vnode) { //定义点击函数函数单击处理程序(e){ if(El。包含(e . target)){//如果点击区域在所在指令元素内部，则直接返回返回false } if(binding . expression){//如果定义了表达式，则执行表达式中的函数绑定。价值(e)；} } El。vueoutsidekick=ClickHandler文件。addeventlistener(' click '，click handler)；//绑定到文档的点击事件}，unbind:函数(el，binding，vnode){ document。removeeventlistener(' click ')，El。vueoutsideclick)；//解绑删除el.vueOutsideClick//销毁}});var app=new Vue({ el: '#app '，data: { isShow: false }，methods : { close : function(){ this。是显=假；} }});约束中：

首先在定义了点击函数，内部逻辑为：如果点击区域在所在指令元素内部，则直接返回；如果定义了表达式，则执行表达式中的函数（示例中是关闭).这里用到了包含函数，包含（二)是判断元素A是否包含了元素b。接着在埃尔中定义了一个变量，用于存放刚才定义的点击函数绑定()与解除绑定()通过埃尔变量进行参数传递。然后绑定到文档的点击事件解除绑定。中：

解绑在约束中绑定的点击事件。销毁该变量css:

[v-斗篷]{ display : none；}.主{宽度： 125px}按钮{ display:块宽度： 100%;color: # ffffff背景色-: # 99cc 66；边框： 0；padding: 6px文本对齐：中心；font-size : 12px边界半径： 4px光标：指针；相对位置：大纲：无；}按钮：活动{ top : 1pxleft: 1px}。下拉列表{宽度： 100%；高度： 150像素；边距： 5px 0；font-size : 12px背景-color : # ffffff；边界半径： 4pxbox-shadow: 0 1px 6px rgba(0，0，0，2);}.DrOp p { display : }内联块；padding: 6px }效果：

2电子稳定控制关闭

现在让我们做个优化，即在按下键盘的经济社会委员会键时，也能关闭下拉菜单。

js:

bind:函数(el，binding，vnode){函数单击处理程序(e){ if(El。包含(e . target)e .键码！==27) {返回false}.} .文件。addeventlistener('向上键'，clickHandler，false)；//绑定键盘事件}，unbind:函数(el，binding，vnode){ 0.文件。removeeventlistener(' keyup '，El。vueoutsidekick//解绑.}在约束函数中，强化了判断，如果点击区域在所在指令元素内部并且没有按下经济社会委员会键时，才直接返回。即按下经济社会委员会键时，会执行后续操作（执行表达式中的函数)。

在解放函数中，也解绑了按键事件。

效果：

3电子稳定控制为可选项

我们可以把经济社会委员会作为可选项，而这可以通过修饰符来实现。

js:

Bind:函数(el，binding，vnode){//定义是否打开开关var ESC switch=(binding。修饰符绑定。修饰语。ESC)；If (el.contains(e.target)) {//如果被点击的区域在指令元素内部，如果(esc switch e . key code==27){//有ESC修饰符，让程序执行} else {//直接返回return false}} if (binding.expression) {//如果定义了表达式，则在表达式中执行函数binding . value(e)；}} .}我们使用binding.modifiers判断自定义指令是否设置了esc修饰符，然后基于此编写后续逻辑。

html:

div id=' app ' v-斗篷div class=' main ' v-out-click . ESC=' close './div/div本文中的示例代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。