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


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了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="stylesheet" type="text/css" href="style.css" >
</head>
<body>
 <div id="app" v-cloak>
 <div class="main" v-clickoutside="handleClose">
  <button @click="show = !show">点击显示下拉菜单</button>
  <div class="dropdown" 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>

根实例 index.js

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

下拉框组件 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__;
 }
});

样式表

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

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
vue实现二级导航栏效果
Oct 19 #Javascript
vue.js实现二级菜单效果
Oct 19 #Javascript
vue实现多级菜单效果
Oct 19 #Javascript
vue.js实现三级菜单效果
Oct 19 #Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
You might like
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python语言是免费还是收费的?
2020/06/15 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
房地产销售大学生自我评价分享
2013/11/11 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
入团介绍人意见范文
2015/06/04 职场文书
公司安全管理制度范本
2015/08/05 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Python读取和写入Excel数据
2022/04/20 Python
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python