脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.js 自定义下拉菜单指令

浅谈Vue.js中如何实现自定义下拉菜单指令

 更新时间：2019年01月06日 16:15:45   作者：deniro  
这篇文章主要介绍了浅谈Vue.js中如何实现自定义下拉菜单指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

我们利用  Vue.js 的自定义指令能力，来实现一个自定义下拉菜单功能。描述如下：

  1. 点击按钮，弹出下拉菜单。
  2. 点击下拉菜单之外的区域，关闭下拉菜单。

1基础版

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" >
</head>
<body>

  <div id="app" v-cloak>
    <div class="main" v-outside-click="close">
      <button @click="isShow=!isShow">点击</button>
      <div class="dropDown" v-show="isShow">
        <p>零售新物种：药店和便利店合体之后</p>
      </div>
    </div>
  </div>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="index.js"></script>

</body>
</html>

我们为按钮绑定了 isShow 变量，当点击按钮时，显示 class="dropDown" 的 div 元素。

js：

Vue.directive('outside-click', {
  bind: function (el, binding, vnode) {
    //定义点击函数
    function clickHandler(e) {
      if (el.contains(e.target)) {//如果点击区域在所在指令元素内部，则直接返回
        return false;
      }
      if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
        binding.value(e);
      }
    }

    el.vueOutsideClick = clickHandler;
    document.addEventListener('click', clickHandler);//绑定到 document 的点击事件
  },
  unbind: function (el, binding, vnode) {
    document.removeEventListener('click', el.vueOutsideClick);//解绑
    delete el.vueOutsideClick;//销毁
  }

});

var app = new Vue({
  el: '#app',
  data: {
    isShow: false
  },
  methods: {
    close: function () {
      this.isShow = false;
    }
  }
});

bind 中：

  1. 首先在定义了点击函数，内部逻辑为：如果点击区域在所在指令元素内部，则直接返回；如果定义了表达式，则执行表达式中的函数（示例中是 close）。
  2. 这里用到了 contains 函数， A.contains(B) 是判断元素 A 是否包含了元素 B。
  3. 接着在 el 中定义了一个变量，用于存放刚才定义的点击函数。bind() 与 unbind() 通过 el 变量进行参数传递。
  4. 然后绑定到 document 的点击事件。

unbind 中：

  1. 解绑在 bind 中绑定的点击事件。
  2. 销毁该变量。

css：

[v-cloak] {
  display: none;
}

.main {
  width: 125px;
}

button {
  display: block;
  width: 100%;
  color: #ffffff;
  background-color: #99CC66;
  border: 0;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  outline: none;
}

button:active {
  top: 1px;
  left: 1px;
}

.dropDown {
  width: 100%;
  height: 150px;
  margin: 5px 0;
  font-size: 12px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.dropDown p {
  display: inline-block;
  padding: 6px;
}

效果：

2  ESC 关闭

现在让我们做个优化，即在按下键盘的 ESC 键时，也能关闭下拉菜单。

js：

bind: function (el, binding, vnode) {
  function clickHandler(e) {
    if (el.contains(e.target) && e.keyCode !== 27) {
      return false;
    }
    ...
  }

  ...
  document.addEventListener('keyup', clickHandler, false);//绑定键盘事件
},
unbind: function (el, binding, vnode) {
    ...
  document.removeEventListener('keyup', el.vueOutsideClick);//解绑
  ...
}

在 bind 函数中，强化了判断，如果点击区域在所在指令元素内部并且没有按下 ESC 键时，才直接返回。即按下  ESC 键时，会执行后续操作（执行表达式中的函数）。

在  unbind 函数中，也解绑了 keyup 事件。

效果：

3 ESC 为可选项

我们可以把 ESC 作为可选项，而这可以通过修饰符来实现。

js：

bind: function (el, binding, vnode) {
  //定义点击函数
  function clickHandler(e) {

    //是否开启开关
    var escSwitch = (binding.modifiers && binding.modifiers.esc);

    if (el.contains(e.target)) {//如果点击区域在所在指令元素内部时
      if (escSwitch && e.keyCode === 27) {//带有了 esc 修饰符，则让程序往下执行
      } else {//直接返回
        return false;
      }
    }
    if (binding.expression) {//如果定义了表达式，则执行表达式中的函数
      binding.value(e);
    }
  }

  ...
}

我们通过 binding.modifiers 来判断自定义指令是否设置了 esc 修饰符，然后以此为基础，来编写后续逻辑。

html：

<div id="app" v-cloak>
  <div class="main" v-outside-click.esc="close">
    ...
  </div>
</div>

本文示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue-cli项目使用mock数据的方法（借助express）

    vue-cli项目使用mock数据的方法（借助express）

    现如今前后端分离开发越来越普遍，前端人员写好页面后可以自己模拟一些数据进行代码测试，这样就不必等后端接口，提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的,需要的朋友可以参考下
    2019-04-04
  • vue多级多选菜单组件开发

    vue多级多选菜单组件开发

    这篇文章主要为大家分享了vue多级多选菜单组件开发案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue页面加载后和刷新后的样式差异问题的解决方案

    Vue页面加载后和刷新后的样式差异问题的解决方案

    在使用 Vue 构建的单页面应用中,页面的样式可能因为路由切换、组件加载顺序或样式的动态加载导致样式混乱,尤其是在复杂的应用中,随着页面的切换或者刷新,按钮、文字、布局等可能表现出不同的样式,所以本文给大家介绍了Vue页面加载后和刷新后的样式差异问题的解决方案
    2025-01-01
  • 图文详解vue框架安装步骤

    图文详解vue框架安装步骤

    我们在本篇内容里给大家整理了关于vue框架安装的步骤以及需要注意的地方，有需要的朋友们学习下。
    2019-02-02
  • Axios学习笔记之使用方法教程

    Axios学习笔记之使用方法教程

    axios是用来做数据交互的插件，最近正在学习axios，所以想着整理成笔记方便大家和自己参考学习，下面这篇文章主要跟大家介绍了关于Axios使用方法的相关资料，需要的朋友们下面来一起看看吧。
    2017-07-07
  • 基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)

    前段时间的vue项目中用到了echarts柱状图,由于UI设计稿中要求使用渐变色,并且每个柱子的颜色不同,于是做了一番研究,现将我的实现方案分享如下
    2024-05-05
  • 基于Vue+ECharts实现地图展示与交互

    基于Vue+ECharts实现地图展示与交互

    这篇文章中,我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件,其中支持返回上一层地图、点击查看不同城市的详细信息,以及根据数据动态展示不同的统计信息,感兴趣的小伙伴跟着小编一起来看看吧
    2025-02-02
  • vue3+echarts实现渐变色环形图过程

    vue3+echarts实现渐变色环形图过程

    这篇文章主要介绍了vue3+echarts实现渐变色环形图过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue3+TypeScript实现递归菜单组件的完整实例

    Vue3+TypeScript实现递归菜单组件的完整实例

    Vue.js中的递归组件是一个可以调用自己的组件,递归组件一般用于博客上显示评论,形菜单或者嵌套菜单,文章主要给大家介绍了关于Vue3+TypeScript实现递归菜单组件的相关资料,需要的朋友可以参考下
    2021-08-08
  • Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    Vue动态构建混合数据Treeselect选择树及巨树问题的解决

    这篇文章主要介绍了Vue动态构建混合数据Treeselect选择树及巨树问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07

最新评论