方法一:
1、写插件:
在 src 文件夹下面建 lib 文件夹用于存放插件,lib 文件夹下再建toastr文件夹,在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件。整个项目目录如下所示:
toastr.vue 的内容如下:
toastr.vue 是做一个弹出提示,其中传入的参数有两个:message和 isShow,分别表示提示消息以及是否显示提示。
toastr.js中写install方法,内容如下:
2. 本地测试
本插件的功能就这么多,因为我们尚未发布,所以先进行本地测试。
2.1 将 App.vue 多余代码删除。
2.2 在 main.js 中引入
2.3 在 App.vue 中使用 toastr (别忘记需要传递的参数)
方法二:
1、写插件:
在 src 文件夹下面建 lib 文件夹用于存放插件,lib 文件夹下再建toastr文件夹,在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件。整个项目目录如下所示:
toastr.vue 的内容如下:
toastr.js中写install方法,内容如下:
2. 本地测试
2.1 在 main.js 中引入:
2.2 在 App.vue 中使用 toastr:
比较:
以上介绍了这两种不同的插件编写方法,貌似没有什么不一样啊,真的是这样么?
来看一下以上完整的main.js和app.vue两个文件发现,第一个toastr是显示的写在app.vue模板里的,而第二个toastr并没有作为一个组件写入,仅仅是通过一个方法控制显示。