vue如何实现点击空白处收起下拉框

这篇文章主要介绍“Vue如何实现点击空白处收起下拉框”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何实现点击空白处收起下拉框”文章能帮助大家解决问题。

vue自定义指令

解释(参考官方文档)

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

举例:

我们要让这样一个输入框在页面加载的时候获得焦点

我们可以注册自定义指令

全局注册:

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})

局部注册

//组件内directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}

然后便可以在模板中相关元素上使用自定义的v-focus属性:(这里的v-focus是从自定义的focus得来的)

<input v-focus>

钩子函数(参考官方文档)

上面例子中我们用的钩子是inserted，这个是在被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
vue官方文档上有一些钩子可供我们参考使用:

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 Vnode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

通过自定义指令实现点击空白处隐藏下拉框

关于自定义指令，我们就不再多说了，下面我们来讲下如何通过指令来实现我们这个需求吧。

首先注册全局指令

// 一般在vue项目中的main.js中// 添加点击空白处的指令Vue.directive('click-outside', { bind: function (el, binding, vnode) { el.clickOutsideEvent = function (event) { // here I check that click was outside the el and his childrens if (!(el == event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event) } } document.body.addEventListener('click', el.clickOutsideEvent) }, unbind: function (el) { document.body.removeEventListener('click', el.clickOutsideEvent) }})

在需要监听的组件元素上添加自定义指令

// 这里的clickOutSide是在监听到点击的不是<input id="dropdown1" v-show="flag" v-click-outside="clickOutSide" />

这个id为dropdown1的元素当监听到点击的不是自身的时候，就会触发clickOutSide方法。

在组件里定义响应方法

// 点击空白处使topBar隐藏 clickOutSide() { this.flag = false; },

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

关于“vue如何实现点击空白处收起下拉框”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。