有时候，在日常开发中，有一种需求是，当下拉框展开时，可以通过点击空白处来收回下拉框。这里，我们只需通过vue2.0中的自定义指令来实现它。

看来截图尺寸有点大()

Vue自定义指令

解释(参考官方文件)

除了核心功能(v-model和v-show)的默认内置指令外，Vue还允许注册自定义指令。请注意，在Vue2.0中，代码重用和抽象的主要形式是组件。但是，在某些情况下，您仍然需要对普通的DOM元素执行底层操作，然后您将使用自定义指令。

示例：

我们希望这样的输入框在页面加载时获得焦点

我们可以注册自定义说明

全球注册：

//当绑定元素插入到DOM中时，注册一个全局自定义指令` v-focus`vue.directive ('focus '，{//即可).插入3360函数(El) {//focus元素el.focus() }})进行本地注册

//组件中的指令： { focus : {//指令的定义插入3360 function (El) {el.focus ()}}然后可以对模板中的相关元素使用自定义的v-focus属性3360(其中v-focus是从自定义的focus中派生出来的)

输入v-focus挂钩功能(参考官方文件)

在上面的例子中，我们使用的钩子被插入，当绑定元素被插入到父节点中时调用(只保证父节点存在，但不一定插入到文档中)。vue的官方文件上有一些钩子供我们参考和使用：

绑定：只调用一次，当指令第一次绑定到元素时调用。在这里，您可以进行一次性初始化设置。插入：当绑定元素插入到父节点时调用(只保证父节点存在，但不一定插入到文档中)。Update:当组件的VNode更新时会调用它，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是，您可以通过比较更新前后的值来忽略不必要的模板更新(有关钩子函数参数的详细信息，请参见下文)。ComponentUpdated:在指令所在组件的VNode及其子VNode全部更新后调用。Unbind:仅调用一次，当指令与元素解除绑定时调用。单击空白处，通过自定义说明隐藏下拉框

我们将不再讨论定制说明。我们来谈谈如何通过指令实现我们的要求。

首先注册全局指令

//一般添加指令vue . directive(' click-out '，{bind : function (El，binding，vnode){ El . clickoutideevent=function(event){//这里我检查一下click是在El和他的子代if(！(El==event . target | | El . contains(event . target)){//如果有，则调用属性值vnode . context[binding . expression](event)} } document . body . addevent listener(' click '，El . clickoutedeevent)}、Unbind : function(El){ document . body . removeevent listener(' click '，El . clickoutedeevent)})中提供的方法，以添加关于要侦听的组件元素的自定义说明

//这里的click outer指的是id为dropdown1的元素，不是输入id=' drop down 1 ' v-show=' flag ' v-click-outer=' click outer '/当被监控到不是自己时，会触发click outer方法。

在组件中定义响应方法

//单击空白处使topBar隐藏ClickOut(){ this . flag=false；}，这样可以达到和文章开头类似的效果。

不是很简单吗？说明书有很多简单的用法，可以自己研究。

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