Vue.js下拉菜单组件使用方法详解

本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码，供大家参考，具体内容如下

效果

#### 入口页面index.html

！DOCTYPE html html lang=' en ' 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='样式表type=' text/CSS ' href=' style。CSS '/头体div id=' app ' v-斗篷div class=' main ' v-click out=' handleClose '按钮@click='show=！'显示'点击显示下拉菜单/button div class='下拉' v-show='显示' p下拉框的内容，点击外面区域可以关闭/p/div/div/脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本脚本src=' http :点击退出。js /脚本脚本src=' http :索引。js /脚本/body/html根实例index.js

var app=new Vue({ el: '#app '，data: { show: false }，methods : { handleClose(){ this。show=false} }});下拉框组件clickoutside.js

vue。指令('点击退出'，{ bind:函数(el，binding，vnode){函数文档处理程序(e){ if(El。包含(e . target)){ return false；} if(绑定。表达式){ binding。价值(e)；} } el ._ _ vueclickout _ _=文档处理程序；文件。addeventlistener(' click '，文档处理程序)；}，unbind:函数(el，binding){文档。removeeventlistener(' click '，el)._ _ vueclickout _ _)；删除埃尔._ _ vueclick out _ _}});样式表

[v-斗篷]{ display : none；}.主{宽度： 125px}按钮{ display:块宽度： 100%;color: # fff背景色： # 39f边框： 0；padding: 6px文本对齐：中心；font-size : 12px边界半径： 4px光标：指针；大纲：无；相对位置：}按钮：激活{ top :1 pxleft: 1px}。下拉列表{宽度：100%；高度： 150像素；边距： 5px 0；font-size : 12px背景-color : # fff；边界半径： 4pxbox-shadow: 0 1px 6px rgba(0，0，0，2);}.下拉菜单p { display : in-block；padding: 6px }更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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