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下拉菜单渲染数据
首先获取后台数据 <script>var apps = new Vue({el: '#table',data: {selectValue: '',editlist: [],},mounte ...
vue动态生成下拉框_解决vue动态下拉菜单有数据未反应的问题
问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料发现 Vue的this理解有误 jsp 下拉菜单 {{item.plantModelName}} JS new Vue({ el ...
Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...
自适应分辨率可扩展二层JS下拉菜单
1. S下拉菜单原理下拉菜单实际上就是在开始的时候显示一级或者说是主菜单(图一).当触发条件(例如:鼠标移动到上面时)显示次级菜单(图二). 图一图二那么如何实现这样的效果呢.其实很简单.所有的 ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
vue封装上拉菜单组件_Vue的灵活的lil上下文菜单组件
vue封装上拉菜单组件 vue-lil上下文菜单 (vue-lil-context-menu) A flexible context menu component for Vue. Pass it a ...
抗疫逆行者网页作业感动人物网页代码成品网页作业带JS下拉菜单最美逆行者网页模板致敬疫情感动人物网页设计制作
大学生抗疫逆行者网页作业成品作品介绍作品技术效果预览网页下载作品介绍逆行者感动人物网页作品包含1个首页5个子页面,共计6个页面,作品采用大学生基础水平制作. 作品技术主要知识点应用:JS ...
使用vue来开发一个下拉菜单组件(1)
一.新建demo工程 vue init webpack-simple demo 添加src/mixins/emitter.js文件(见前几篇博文) 安装font-awesome字体库: cnpm in ...
使用vue来开发一个下拉菜单组件(2)
二.组件设计接下来是开发选择框组件,首先需要自定义一个点击外部使下拉菜单关闭的指令: export default {bind(el, binding, vnode) {function docum ...
小程序下拉菜单组件(含多层筛选)
图例中筛选是另外一个组件一般在筛选的场景中需要使用下拉菜单,动态设置筛选条件,比如淘宝,京东的产品筛选列表,携程的旅游目的地的筛选列表. 支持配置化设置弹层内容支持动态刷新弹层内容支持动态修改 ...

Vue.js--下拉菜单组件

效果

根实例 index.js

下拉框组件 clickoutside.js

样式表

Vue.js--下拉菜单组件相关推荐

最新文章

热门文章