PulldownMenu.vue

<template lang="pug">
.pulldown-menu
  .outer(@click="hide", :style="active ? { opacity: 1, visibility: 'visible'} : { opacity: 0, visibility: 'hidden' }")
    .inner(@click.stop="", :style="style")
      slot
</template>

<script lang="coffee">
export default
  props:
    width:
      type: Number
      require: false
      default: null
      coerce: (val) -> parseFloat(val) if val?
  data: ->
    active: false
    top: null
    left: null
  computed:
    style: ->
      if @active
        { opacity: 1, visibility: 'visible', top: "#{@top}px", left: "#{@left}px", width: "#{@width}px" }
      else
        { opacity: 0, visibility: 'hidden' }
  methods:
    show: (target) ->
      @top  = target.getBoundingClientRect().top  + target.height
      @left = target.getBoundingClientRect().left
      if @width?
        right = target.getBoundingClientRect().right
        parentWidth = right - @left
        @left = @left - @width + parentWidth
      @active = true
    hide: ->
      @top = null
      @left = null
      @active = false
    toggle: (target) ->
      if @active then @hide() else @show(target)
</script>

<style lang="scss" scoped>
.pulldown-menu {
  > .outer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    z-index: 100;

    > .inner {
      position: absolute;
      background-color: $white;
      color: $black;

      > .list {
        > .item {
          padding: $small-spacing;
        }
      }
    }
  }
}
</style>