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

2024-05-06 15:43:31

字体：大中小

来源：转载

供稿：网友

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

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

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 中：

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

unbind 中：

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

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;}

上一篇：小程序二次贝塞尔曲线实现购物车商品曲线飞入效果

下一篇：jQuery实现的别踩白块小游戏完整示例