一种是在请求数据前展示toast，比如Toast.show(),然后在获取到数据以及处理完所需要的任务之后隐藏Toast.hide()，这样的话提示框显示的时间基本就是请求数据所花的实际
还有种是在toast组件中设置属性duration(比如默认2.5秒)控制toast展示时间，这样的话toast显示的时间就根据传递的时间来，Toast.show(3) 那就是toast显示3秒后关闭
插件通常用来为 Vue 添加 全局功能 ，所谓全局即不需要像组件那样，每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次，在任何组件就可以直接使用 。（类似于我们在window上添加的方法属性那样，任何地方都可以用）
下面几种常见的用途：
主要两种使用方式
一：全局引入方式
（1）使用步骤
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
也可以传入一个可选的选项对象：
（2）在main.js中配置
比如：使用element-ui为例：
组使用件中
二：组件引入方式
比如，以使用 swiper为例
组件中使用
vue插件其实就是一个简单的 js对象而已 ，然后这个插件对象有一个公开属性 install ，他的值为一个函数，此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。
一：开发插件有四种方法
二：添加实例方法
其中最常用的：【4. 添加实例方法】的写法和使用方法，下面举例说明toast 最简单插件开发过：
（1）新建一个plugin目录，编辑插件toast.js文件
（2）在 main.js 中，需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件
（3）我们在组件中来获取该插件定义的 $msg 属性，比如在根组件App.vue中
控制台输出：Hello World
三：添加全局资源
这里主要介绍过滤器
（1）在plugin目录新建插件filter.js文件
（2）在 main.js 中，需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件
（3）HelloWorld.vue页面上使用
添加全局资源也可以不放在插件里面实现，可以直接在main.js入口文件创建Vue实例前添加：
其他组件就可以通过this直接使用:
（1）核心区别
简单来说，插件就是指对Vue的功能的增强或补充。
（2）其他区别
一个Vue插件可以是一堆Vue组件的集合（插件干的事就是把内部的组件帮你倒入到vue全局下），也可以是用来扩展Vue功能的，比如 Vuex， Vue-Router。
测试完成，下面就要把的内容打包发布到npm 上去,具体步骤可以参照
https://www.cnblogs.com/adouwt/p/9211003.html
<script type="text/javascript">
$(function(){
$('#demo1').on('click', function(){
webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000)
})
$('#demo2').on('click', function(){
popTipShow.alert('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等', ['知道了'],
function(e){
//callback 处理按钮事件
var button = $(e.target).attr('class')
if(button == 'ok'){
//按下确定按钮执行的操作
//todo ....
this.hide()
}
}
)
})
$('#demo3').on('click', function(){
popTipShow.confirm('弹窗标题','自定义弹窗内容，居左对齐显示，告知需要确认的信息等',['确 定','取 消'],
function(e){
//callback 处理按钮事件
var button = $(e.target).attr('class')
if(button == 'ok'){
//按下确定按钮执行的操作
//todo ....
this.hide()
setTimeout(function() {
webToast("操作成功","top", 2000)
}, 300)
}
if(button == 'cancel') {
//按下取消按钮执行的操作
//todo ....
this.hide()
setTimeout(function() {
webToast("您选择“取消”了","bottom", 2000)
}, 300)
}
}
)
})
$('#demo4').on('click', function(){
var html = "<label>姓名：<input class='confirm_input' placeholder='请输入'></label>"
popTipShow.confirm('弹窗标题',html,['确 定','取 消'],
function(e){
//callback 处理按钮事件
var button = $(e.target).attr('class')
if(button == 'ok'){
if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
webToast("姓名不能为空！","bottom", 3000)
return
}
this.hide()
setTimeout(function() {
webToast($(".confirm_input").val(),"bottom", 3000)
}, 300)
//按下确定按钮执行的操作
//todo ....
}
if(button == 'cancel') {
//按下取消按钮执行的操作
//todo ....
this.hide()
setTimeout(function() {
webToast("您选择“取消”了","top", 2000)
}, 300)
}
}
)
})
})
</script>
