本文摘自PHP中文网,作者coldplay.xixi,侵删。
写出vue.js菜单组件的方法:首先使用【index.html】编写入口页面;然后使用【clickoutside.js】下拉框组件,代码为【Vue.directive('clickoutside'】;最后实现样式表。
【相关文章推荐:vue.js】
本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。
写出vue.js菜单组件的方法:
1、入口页面 index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!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
1 2 3 4 5 6 7 8 9 10 11 | var app = new Vue({
el: '#app' ,
data: {
show: false
},
methods: {
handleClose () {
this.show = false;
}
}
});
|
3、下拉框组件 clickoutside.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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、样式表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | [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;
}
|
相关免费学习推荐:JavaScript(视频)
以上就是如何编写出vue.js菜单组件的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
vue.js中使用动态组件的方法
vue.js中的el什么意思
如何知道vue.js的版本号
vue.js怎样引入css样式
vue.js如何引用vue router
vue.js循环引用组件报错怎么办
如何安装vue.js devtools?
vue.js判断对象是否为空的方法是什么
vue.js怎么给input添加事件
vue.js怎么部署到服务器上
更多相关阅读请进入《vue.js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何编写出vue.js菜单组件