之前在html里使用了一个toast插件,后来发现是基于jQuery的,想想好不容易用VUE了又结合着jQuery来用总觉得不伦不类,而且要在vue3里面引入jQuery也稍微有点复杂,想想还是使用vue插件的好。

但是之前试了几个插件都有兼容性的问题,这次专门在npmjs里搜了toast vue3,出来只有4个插件,新建了一个vue cli实例测试了一下,基本都能用,于是最终选定这个@meforma/vue-toaster,因为还能带各种颜色。

不过测试的时候很好,项目里面又遇到问题,不管position写的是top还是bottom,toast一律只出现在右下角,最终通过把组件的Toast.vue文件postiion的default参数改成Positions.TOP,改成了自己想要的位置解决了。

position: {
  type: String,
  default: Positions.TOP,
  validator(value) {
    return Object.values(Positions).includes(value)
  }
},

虽然是小坑,但是也花了不少时间。

最后编辑:2021年01月17日 ©著作权归作者所有

发表评论