How to write a vue.js menu component-Vue.js-php.cn

How to write a vue.js menu component

coldplay.xixi

Release： 2020-11-30 13:33:44

Original

2994 people have browsed it

How to write the vue.js menu component: first use [index.html] to write the entry page; then use the [clickoutside.js] drop-down box component, the code is [Vue.directive('clickoutside']; Finally, the style sheet is implemented.

How to write a vue.js menu component

[Related article recommendations: vue.js]
The operating environment of this tutorial: windows7 system, Vue2 .9.6 version, this method is applicable to all brands of computers.

How to write the vue.js menu component:

1. Entry page index.html




 
 
 
 可从外部关闭的下拉菜单
 



 
  
   
   
    下拉框的内容，点击外面区域可以关闭

Copy after login

2. Root instance index.js

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

Copy after login

3. Drop-down box component 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__;
 }
});

Copy after login

4. Style sheet

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

Copy after login

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to write a vue.js menu component. For more information, please follow other related articles on the PHP Chinese website!