Vue vue-notificatio

by kabanoki

HTML

<div id="app">
    <button @click="onClick('top-right', 'warn')">【warn】top right</button>
    <button @click="onClick('top-center', 'error')">【error】top center</button>
    <button @click="onClick('bottom-center', 'success')">【success】bottom center</button>
    <button @click="onClick('bottom-left', 'warn')">【warn】bottom left</button>
    <notifications group="top-right"></notifications>
    <notifications group="top-center" position="top center"></notifications>
    <notifications group="bottom-center" position="bottom center"></notifications>
    <notifications group="bottom-left" position="bottom left"></notifications>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<script type="text/javascript">
    window.vue = window.Vue;
</script>
<script type="text/javascript" src="https://unpkg.com/vue-notification"></script>

CSS

#app {
 padding: 50px;
}

Vue

window.vueNotification = window["vue-notification"].default;
Vue.use(vueNotification);

new Vue({
  el: "#app",
  methods: {
    onClick: function(position, type){
      this.$notify({
        title: 'メッセージです。',
        text: 'click to ' + position ,
        duration:100,
        group: position,
        type: type
      });
    }
  }
})