VUEカスタムプラグインToast

クエリーに備えて、自分が直面した問題を記録します.
toast.js

import ToastTemplate from './ToastTemplate'

let Toast = {}

Toast.install = function(Vue,params={}){
  const VueToast = Vue.extend(ToastTemplate)  //    
  let toast = null

  Vue.prototype.$toast = (params={}) =>{
    if(!toast){
      toast = new VueToast().$mount()  //    
      document.body.appendChild(toast.$el)  //    
    }
    toast.show(params)

  }
}
export default Toast

ToastTemplate.vue

  export default {
    name: 'ToastTemplate',
    data(){
      return{
        isShow: false,
        color: '#FFFFFF',
        backgroundColor: '#29B0F0',
        message: '333',

        time:800,
        timer:null,
        animate:null,
      }
    },
    updated(){
      let left = this.$refs.msg.clientWidth/2
      this.$refs.msg.style.left = 'calc(50% - '+ left +'px)'
    },
    methods:{
      show(params) {
        let _this = this
        if(this.animate){
          this.animate.cancel()
        }
        if(this.timer){
          clearTimeout(this.timer);
        }
        //     
        let { color,backgroundColor,message } = params
        this.color = color?color:'#FFFFFF'
        this.backgroundColor = backgroundColor?backgroundColor:'#29B0F0'
        this.message = message
        this.isShow = true

        this.timer = setTimeout(function () {
          _this.animate = _this.$refs.msg.animate([
            {opacity:1},
            {opacity:0}
          ],{duration:500})

          _this.animate.onfinish = function(){
            _this.isShow = false
            clearTimeout(_this.timer);
          }
        },_this.time)
      }
    }
  }

main.js

import Toast from './Toast'
Vue.use(Toast)