Skip to content

Instantly share code, notes, and snippets.

@faforty
Created December 1, 2016 13:36
Show Gist options
  • Save faforty/a1185d61b416e7fd0b2252607fc29832 to your computer and use it in GitHub Desktop.
Save faforty/a1185d61b416e7fd0b2252607fc29832 to your computer and use it in GitHub Desktop.
<template>
<div :class="{ 'ui-dropdown': true, 'ui-dropdown--open': opened}">
<div class="ui-dropdown__content">
<div style="cursor: pointer;z-index: 2;position: relative;" @click="open">
<slot></slot>
</div>
<div :class="{ 'ui-dropdown__overlay': true, 'ui-dropdown__overlay--list': true, 'ui-animation-zoom enter': opened }">
<slot name="list"></slot>
</div>
</div>
<div :class="{ 'ui-dropdown__overlay': true, 'ui-animation-zoom enter': opened }"></div>
</div>
</template>
<script>
export default {
data: () => ({
opened: false
}),
methods: {
open () {
this.opened = !this.opened
}
},
mounted () {
this.$el.addEventListener('click', function () {
event.stopPropagation()
})
document.body.addEventListener('click', function () {
this.opened = false
}.bind(this))
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment