怎么在vue中通过指令怎么实现点击空白处收起下拉框-创新互联
今天就跟大家聊聊有关怎么在vue中通过指令怎么实现点击空白处收起下拉框,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
来安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18982081108(备注:SSL证书合作)期待与您的合作!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中通过指令怎么实现点击空白处收起下拉框有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:怎么在vue中通过指令怎么实现点击空白处收起下拉框-创新互联
新闻来源:http://scyanting.com/article/cchoso.html