Stripeのようなメニューを「vue-stripe-menu」で実装する

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-stripe-menu.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-stripe-menu.umd.min.js"></script>
<div id="app">
  <vsm-menu :menu="menu">
      <template #default="data">
        <component
          :is="data.item.content"
          class="content"
        ></component>
        <component
          :is="data.item.secondary"
          class="content--secondary"
        ></component>
      </template>
      <template slot="after-nav">
        <vsm-mob>Mobile Content</vsm-mob>
      </template>
  </vsm-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/[email protected]/dist/vue-stripe-menu.umd.min.js"></script>

CSS

.base-text{
  padding: 15px;
}
.base-text__content{
  padding: 10px;
}

a {
  text-decoration: none;
  
}

Vue

const VueStripeMenu  = window['vue-stripe-menu'].default;

const FirstItem = Vue.component('first-item', {
  template: '<div class="base-text "><div class="base-text__content" v-for="item in items"><a :href="item.link" v-text="item.title"></a></div></div>',
  data() {
    return {
      items: [
        {title: 'item1', link:'#'},
        {title: 'item2', link:'#'},
        {title: 'item3', link:'#'}
      ]
    }
  }
});

const SecondItem = Vue.component('second-item', {
  template: '<div class="base-text "><div class="base-text__content">sample title</div></div>',
})

Vue.use(VueStripeMenu);
let app = new Vue({
  el: '#app',
  data: {
    menu: [
        { title: 'First item', dropdown: 'first', content: FirstItem },
        { title: 'Second item', dropdown: 'second', content: SecondItem },
        { title: 'No dropdown' }
      ]
  }
});