<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签页组件</title>
<style type="text/css">
[v-cloak]{
display: none;
}
.main{
width: 125px;
}
button{
display: block;
width: 100%;
color:
background-color:
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:
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.dropdown p{
display: inline-block;
padding: 6px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="main" v-clickoutside.esc="handleClose">
<button @click="show=!show">点击显示下拉菜单</button>
<div class="dropdown" v-show="show">
<p>下拉框的内容，点击外面区域可以关闭</p>
</div>
</div>
<div id="article">
haha
</div>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('clickoutside',{
bind:function(el,binding,vnode){
count=0;
function documentHandler(e){
if(el.contains(e.target)){
return false;
}
if(binding.expression){
binding.value();
}
}
function escHandler(e){
if(e.keyCode===27){
binding.value()
}
}
el.__vueClickOutside__=documentHandler;
if(binding.modifiers.esc===true){
el.escClicked=escHandler;
document.addEventListener('keyup',escHandler)
}
document.addEventListener('click',documentHandler);
},
update:function(el){
count++;
el.nextElementSibling.innerHTML=`刷新了${count}次`
},
unbind:function(el,binding){
document.removeEventListener('click',el.__vueClickOutside__);
document.removeEventListener('keyup',escHandler)
delete el.__vueClickOutside__;
delete el.escHandler;
}
});
const app=new Vue({
el:'#app',
data:{
show:false
},
methods:{
handleClose:function(){
this.show=false;
}
}
});
</script>
</body>
</html>
- 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
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109