脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 点击空白处收起下拉框

vue通过指令(directives)实现点击空白处收起下拉框

 更新时间：2018年12月06日 10:13:48   作者：长肉肉呱  
这篇文章主要介绍了vue通过指令(directives)实现点击空白处收起下拉框，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

日常开发中有时会有这样的需求，就是展开下拉框的时候，通过点击空白处，可以实现让下拉框收回。这里我们通过vue2.0中的自定义指令来简单实现。

貌似截图尺寸有点大(╯﹏╰)

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中引入echarts的步骤及折线图、柱状图常见配置项

    Vue中引入echarts的步骤及折线图、柱状图常见配置项

    这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下
    2023-11-11
  • 带你熟练掌握Vue3之Pinia状态管理

    带你熟练掌握Vue3之Pinia状态管理

    pinia是vue3官方的状态管理工具,当然vue2也可以用,vue2中的状态管理工具是vuex,vue3中不再使用vuex,推荐使用的是pinia,和vuex差不多,但比vuex更方便、更强、更好,下面这篇文章主要给大家介绍了关于Vue3之Pinia状态管理的相关资料,需要的朋友可以参考下
    2022-11-11
  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    学过 vue2 的小伙伴们肯定学习过侦听器，主要是用来监听页面数据或者是路由的变化，来执行相应的操作，在 vue3里面呢，也有侦听器的用法，功能基本一样,本文就来为大家详细讲讲
    2022-07-07
  • Vue3实现自定义Input组件的示例详解

    Vue3实现自定义Input组件的示例详解

    这篇文章主要为大家详细介绍了如何使用Vue3自定义实现一个类似el-input的组件,可以v-model双向绑定,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue项目实现换肤功能的一种方案分析

    Vue项目实现换肤功能的一种方案分析

    这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 基于Vue实现关键词实时搜索高亮显示关键词

    基于Vue实现关键词实时搜索高亮显示关键词

    这篇文章主要介绍了基于Vue实现关键词实时搜索高亮显示关键词，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 基于Vue2的移动端开发环境搭建详解

    基于Vue2的移动端开发环境搭建详解

    这篇文章主要给大家介绍的是基于Vue2的移动端环境搭建，移动端大家更多想到的是响应布局，我们根据不同大小的屏幕进行适配，当然少不了我们的重头戏rem，移动端相比pc端就没什么特别的了。我会一步一步带领大家进入Vue2的世界，感兴趣的朋友下面来一起学习学习吧。
    2016-11-11
  • 监听element-ui table滚动事件的方法

    监听element-ui table滚动事件的方法

    这篇文章主要介绍了监听element-ui table滚动事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • VUE多个下拉框实现双向联动效果

    VUE多个下拉框实现双向联动效果

    这篇文章主要为大家详细介绍了VUE多个下拉框实现双向联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 详解vue模拟加载更多功能（数据追加）

    详解vue模拟加载更多功能（数据追加）

    本篇文章主要介绍了vue模拟加载更多功能（数据追加），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论