vue2组件系列第九节:Toast 轻提示

Toast轻提示是一个很轻的组件，不会像弹出层或者是弹出框兴师动众地展示出来有一种笨重地压迫感，它是在一个操作后的一个轻反馈，显示后会自动消失，不用人为去操作关闭，很是方便。

准备工作：

1. 创建一个页面: Toast.vue
2. 在router.js里配置 Toast页面的路由

{
 path: '/toast',
 name: 'toast',
 component: () => import('./views/Toast.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/toast')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Toast 轻提示</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了7个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Toast轻提示：

经常用的方法：

Toast: 展示提示；vue里为：

this.$toast("hello")

Toast.loading: 展示加载提示；

Toast.success：展示成功提示；vue里写为：

this.$toast.success("成功")

Toast.fail：展示失败提示；vue里写为：

this.$toast.fail("失败")

Toast.clear：关闭提示。

我们在这一季的一开始就将vant的所有组件引入了，Toast组件被引入之后，会自动将$toast方法挂载到Vue的prototype上，所以我们在调用的时候直接使用this.$toast...即可。

还需要说明的一点是，官网上说除了clear方法外，其它的方法都可以使用options设置，但经过本人测试后，虽然都不报错，但呈现最好的是loading方法。所以，如果想添加更多的设置的话，直接在Toast.loading方法上写。

上文有提到Options，这个Options是什么呢？是对展示的一些预设。主要包括以下几种预设：

type：提示的类型，主要有4个值：loading, success, fail, html(这个不知道有啥用意)；

position：在垂直方向的展示位置，有三个值：top, middle, bottom；

message：提示的内容；

mask：是否显示蒙层，一般无用，加了感觉很重；

forbidClick：是否禁止点击背景；

loadingType：值为spinner，加载图标类型。如果前面有设置type值，这块不起效果。

duration：停留的时间长短。为0里，则永不消失。

下面主要演示一下$toast.loading({options})：

需求：点击按钮后展示toast，toast里会有倒计时，到0秒时，toast消失。如图：

我们先在DOM里创建一个触发按钮：

<van-button type="primary" @click="onClick">轻提示</van-button>

根据需求，我们需要改变message的内容，所以需要将loadding方法赋值给一个常量toast。

const toast = this.$toast.loading({
 duration: 0,
 position: 'middle',
 message: '倒计时3秒',
 forbidClick: true,
 loadingType: 'spinner'
})

如果有倒计时，我们肯定马上会想到setInterval()，开始喽！

let seconds = 3;
var timer = setInterval(() => { //定义计时器
 seconds--;
 if(seconds) { //seconds>0时
 toast.message = "倒计时" + seconds + "秒" //注意这里
 } else { //seconds <= 0时
 clearInterval(timer) //删除计时器
 this.$toast.clear() //消除提示
 } 
},1000)

这两段都是写在methods里的onClick里的哈?

到目前为止呢，Toast就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油