this.$toast({
 content: "可自動(dòng)關(guān)閉",
 autoClose: true
})

let instances = []
let initIndex = 0
Vue.prototype.$toast = (options = {}) => {
 /* 創(chuàng)建一個(gè)Toast組件的實(shí)例 */
 let instance = generateInstance(options)
 /* 將單個(gè)toast存入隊(duì)列中 */ 
 instances.push(instance)
}

/* 構(gòu)造單個(gè)toast */
const ToastConstructor = Vue.extend(Toast)
const verticalOffset = 16
function generateInstance(options) {
 // 利用ToastConstructor創(chuàng)建一個(gè)Toast的實(shí)例
 let instance = new ToastConstructor({
 propsData: options
 }).$mount(document.createElement('div'))
 if (typeof options.onClose === 'function') instance.onClose = options.onClose
 //計(jì)算instance verticalOffset
 let id = 'toast_' + initIndex++
 instance.id = id
 // 初始化Toast在空間中的垂直偏移量
 instance.verticalOffset = initVerticalOffset(instance.position)
 //監(jiān)聽(tīng)組件close
 instance.$once('toastClose', function () {
 const curInstance = this
 // 當(dāng)Toast組件關(guān)閉時(shí)，重新計(jì)算垂直方向的偏移量
 updateVerticalOffset(curInstance)
 typeof curInstance.onClose === 'function' && curInstance.onClose()
 })
 return instance;
}

/* 初始化每個(gè)toast對(duì)象在頁(yè)面中的垂直屬性 */
function initVerticalOffset(position) {
 // 篩選同一方向的Toast組件
 let typeInstances = instances.filter(item => item.position === position)
 // 計(jì)算偏移量
 return typeInstances.reduce((sum, elem) => 
  (elem.$el.offsetHeight + sum + verticalOffset), 
  verticalOffset)
}

/* 更新每個(gè)toast對(duì)象在頁(yè)面中的垂直屬性 */
function updateVerticalOffset(removeInstance) {
 let index = 0
 let removeHeight = removeInstance.verticalOffset
 instances.find((elem, i) => {
 if (elem.id === removeInstance.id) index = i
 })
 // 刪除關(guān)閉的Toast組件
 instances.splice(index, 1)
 // 更新在刪除位置之后的組件的位置
 for (; index < instances.length; ++index) {
 if (instances[index].position === removeInstance.position) {
  [instances[index].verticalOffset, removeHeight] = 
  [removeHeight, instances[index].verticalOffset]
 }
 }
}

let instance = new ToastConstructor({
 propsData: options
}).$mount(document.createElement('div'))

mounted() {
 // 掛載Toast在頁(yè)面中
 document.body.appendChild(this.$el);
 // 需要自動(dòng)關(guān)閉時(shí)，調(diào)用startTimer
 if (this.autoClose) this.startTimer();
},
beforeDestroy() {
 this.stopTimer();
 this.$el.removeEventListener("transitionend", this.destroyElement);
},
destroyed() {
 // 注銷
 this.$el.parentNode.removeChild(this.$el);
}

startTimer() {
 if (this.duration > 0) {
 this.timer = setTimeout(() => {
  if (!this.closed) {
  this.close();
  }
 }, this.duration);
 }
},
stopTimer() {
 if (this.timer) clearTimeout(this.timer);
}

export default {
 install (Vue) {
 Vue.prototype.$toast = (options = {}) => {...}
 }
}

export default {
 install (Vue) {
 Vue.prototype.$toast = (options = {}) => {...}
 }
}