如何编写出vue.js菜单组件

互联网 20-11-24

写出vue.js菜单组件的方法：首先使用【index.html】编写入口页面；然后使用【clickoutside.js】下拉框组件，代码为【Vue.directive('clickoutside'】；最后实现样式表。

【相关文章推荐：vue.js】本教程操作环境：windows7系统、Vue2.9.6版，该方法适用于所有品牌电脑。

写出vue.js菜单组件的方法：

1、入口页面 index.html

<!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>可从外部关闭的下拉菜单</title>  <link rel="stylesheet" type="text/css" href="style.css" > </head> <body>  <div id="app" v-cloak>   <div v-clickoutside="handleClose">    <button @click="show = !show">点击显示下拉菜单</button>    <div v-show="show">     <p>下拉框的内容，点击外面区域可以关闭</p>    </div>   </div>  </div>  <script src="https://unpkg.com/vue/dist/vue.js"></script>  <script src="clickoutside.js"></script>  <script src="index.js"></script> </body> </html>

2、根实例 index.js

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

3、下拉框组件 clickoutside.js

Vue.directive('clickoutside',{  bind: function (el, binding, vnode) {   function documentHandler(e) {    if(el.contains(e.target)){     return false;    }    if(binding.expression){     binding.value(e);    }   }   el.__vueClickOutside__ = documentHandler;   document.addEventListener('click',documentHandler);  },  unbind: function (el, binding) {   document.removeEventListener('click', el.__vueClickOutside__);   delete el.__vueClickOutside__;  } });

4、样式表

[v-cloak]{  display: none; } .main{  width: 125px; } button{  display: block;  width: 100%;  color: #fff;  background-color: #39f;  border: 0;  padding: 6px;  text-align: center;  font-size: 12px;  border-radius: 4px;  cursor: pointer;  outline: none;  position: relative; } button:active{  top:1px;  left: 1px; } .dropdown{  width:100%;  height: 150px;  margin: 5px 0;  font-size: 12px;  background-color: #fff;  border-radius: 4px;  box-shadow: 0 1px 6px rgba(0,0,0,.2); } .dropdown p{  display: inline-block;  padding: 6px; }