推荐一款vue的提示框组件m-message

美观,使用简单,是一款不错的插件,名字叫m-message。

推荐一款vue的提示框组件m-message

github:
https://github.com/mengdu/m-message

预览:
https://mengdu.github.io/m-message/example/

特殊说明

在独立的JS文件中如何使用this.$message

const _Vue = new Vue()

_Vue.$message() // 可调用

这个问题由@店长推荐(简书
https://www.jianshu.com/u/fb7e6eb93d7a )帮忙解决了,办法是创建一个Vue对象,再调用方法即可。因为$message是挂载Vue的原型上。

多个loading窗口如何全部关闭

这个插件没有closeAll方法,每一处loading效果都要命名,然后通过命名.close()方法去关闭。类似于setInterval的处理办法。如果有多个加载,则需要一个一个都关闭,否则就会一直显示加载中。

那么如果自行封装的话,我使用了一个小技巧,大概思路如下

Vue.prototype.$loading = function () {
  this.LOADING['vm_0' + Object.keys(this.LOADING).length] = 
  this.$message.loading({
    message: '处理中...',
    align: 'center',
    showClose: false
  })
}

Vue.prototype.$loaded = function () {
  for (let i = 0; i < Object.keys(this.LOADING).length; i++) {
    this.LOADING['vm_0' + i].close()
  }
}
分享