Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<div id="app">
<div>
<button
ref="btn1"
class="toggle-button"
>
Open Country Popup
</button>
<div
v-clickoutside="{
exclude: ['btn1']
}"
class="popup-box"
>
<ul>
<li>IN</li>
<li>US</li>
<li>CA</li>
<li>SA</li>
<li>UAE</li>
</ul>
</div>
</div>
<div>
<button
ref="btn2"
class="toggle-button"
>
Open State Popup
</button>
<div
v-clickoutside="{
exclude: ['btn2']
}"
class="popup-box"
>
<ul>
<li>PA</li>
<li>CA</li>
<li>KJ</li>
<li>MO</li>
<li>TR</li>
</ul>
</div>
</div>
</div>
</template>
<script>
let handleOutsideClick
Vue.directive('clickoutside', {
bind (el, binding, vnode) {
handleOutsideClick = (e) => {
e.stopPropagation();
console.log('test')
const { exclude } = binding.value;
if(vnode.context.$refs[exclude[0]].contains(e.target)){
if(!el.classList.contains('show')){
el.classList.add('show')
}else{
el.classList.remove('show')
}
}else{
// if( !el.contains(e.target))
el.classList.remove('show')
}
}
document.addEventListener('click', handleOutsideClick)
document.addEventListener('touchstart', handleOutsideClick)
},
unbind () {
document.removeEventListener('click', handleOutsideClick)
document.removeEventListener('touchstart', handleOutsideClick)
}
})
export default {
name:"app"
}
</script>
<style>
#app {
font-family: sans-serif;
display: flex;
justify-content: center;
flex-direction: row;
width: 600px;
margin: 0 auto;
}
.toggle-button {
background: #1188FF;
color: #FFF;
border: 0;
border-radius: 2px;
padding: 10px;
font-size: 14px;
cursor: pointer;
outline: none;
transition: 0.2s all;
}
#app > div{
flex:0 0 50%;
}
.toggle-button:hover {
background: #1080F8;
}
.popup-box {
display:none;
width:150px;
background: #F0F8FF;
border-radius: 1px;
box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.2);
color: #555585;
}
.popup-box.show{
display:block;
}
.popup-box ul{
list-style:none;
padding-top:20px;
margin:0px;
padding-left:0px;
}
.popup-box ul li{
list-style:none;
font-size:16px;
cursor:pointer;
padding-bottom:15px;
padding:10px;
}
.popup-box ul li:hover{
background:#c3c3c3;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.