JSFiddle - React, Tailwind, and code Playground

by Lianer

JavaScript

import Vue from 'vue'
import simpleMessageComponent from './simple-message.vue'

var SimpleMessageContructor = Vue.extend(simpleMessageComponent)

var instances = []
var index = 0

var simpleMessage = function (options) {
  options = options || {}

  if (typeof options === 'string' || typeof options === 'number') {
    options = {
      message: options
    }
  }

  var id = 'simple-message-' + index++

  var instance = new SimpleMessageContructor({
    data: options
  })

  instance.id = id
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  instance.vm.visible = true
  instance.dom = instance.vm.$el

  instances.push(instance)

  return instance.vm
}

simpleMessage.closeAll = function () {
  for (let i = instances.length - 1; i >= 0; i--) {
    instances[i].close()
  }
}

export default {
  install (Vue, options) {
    options = options || {}
    Vue.prototype[options.alias || '$simpleMessage'] = simpleMessage
  }
}