13518219792
这篇文章主要介绍了如何在vue中通过指令实现点击空白处收起下拉框的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何在vue中通过指令实现点击空白处收起下拉框文章都会有所收获，下面我们一起来看看吧。
10年积累的成都网站制作、成都网站建设、外贸营销网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有郸城免费网站建设让你可以放心的选择与我们合作。
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得来的)
钩子函数(参考官方文档)
上面例子中我们用的钩子是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是在监听到点击的不是
这个id为dropdown1的元素当监听到点击的不是自身的时候，就会触发clickOutSide方法。
在组件里定义响应方法
// 点击空白处使topBar隐藏
clickOutSide() {
this.flag = false;
},关于“如何在vue中通过指令实现点击空白处收起下拉框”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何在vue中通过指令实现点击空白处收起下拉框”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
