ドロップダウンニューを「vue-dropdown-menu」で実装する

by kabanoki

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="app">
  <dropdown-menu
    v-model="show"
    :right="right"
    :hover="hover"
    :interactive="interactive"
  >
    <button class="btn btn-primary dropdown-toggle">
      Click to open dropdown
    </button>
    <div slot="dropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </dropdown-menu>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@innologica/[email protected]/dist/vue-dropdown-menu.umd.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align:center;
}

.dropdown, .dropleft, .dropright, .dropup {
  display: inline-block;
}

/*translate fade (top to down)*/
.translate-fade-down-enter-active, .translate-fade-down-leave-active {
    transition: all 250ms;
    transition-timing-function: cubic-bezier(.53,2,.36,.85);
}
.translate-fade-down-enter, .translate-fade-down-leave-active {
    opacity: 0;
}
.translate-fade-down-enter, .translate-fade-down-leave-to {
    position: absolute;
}

.translate-fade-down-enter {
    transform: translateY(-10px);
}
.translate-fade-down-leave-active {
    transform: translateY(10px);
}

Vue

const DropdownMenu = window['vue-dropdown-menu'].default;

Vue.use(DropdownMenu);

new Vue({
  el: '#app',
  data: {
    show: false,
    right: false,
    hover: false,
    interactive: false
  }
});