Vue中如何实现自定义全局Toast与Loading实例的详细步骤？

本文共计1018个文字，预计阅读时间需要5分钟。

如果在Vue项目中没有使用任何UI框架，为了提升用户体验，可以考虑使用loading和toast组件。那么，我们可以自定义这两个组件。

1. Toast组件： - 首先在`common`目录下新建`global`文件夹。 - 在`global`文件夹中创建`Toast.vue`文件，存放Toast组件的代码。

2. Loading组件： - 同样在`common`目录下新建`global`文件夹。 - 在`global`文件夹中创建`Loading.vue`文件，存放Loading组件的代码。

如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。

1、Toast组件

首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。