トーストウィジェットを「vue-easy-toast」で実装する

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-easy-toast.min.js"></script>
<div id="app">
  <div class="both">
    <button class="start" @click="doToaste()">起動</button>
  </div>
</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-easy-toast.min.js"></script>

CSS

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

#app {
  background: #fff;
  border-radius: 4px;
  padding: 80px;
  transition: all 0.2s;
}

Vue

const Toast = window['vue-easy-toast'].default;

Vue.use(Toast);

new Vue({
	el: '#app',
  data: {
    text: 'テキストはこんな感じで表示されます。',
    horizontalPosition: 'left',
    verticalPosition: 'top',
    transition: 'fade',
    duration: 1000,
    mode: 'queue'
  },
	methods: {
    doToaste: function(){
      Vue.toast(this.text, {
        id: 'my-toast',
        className: ['my-toast', 'toast-warning'],
        horizontalPosition: this.horizontalPosition,
        verticalPosition: this.verticalPosition,
        duration: this.duration,
        mode: this.mode,
        transition: this.transition
      });
    }
  }
});