准备工作：
- 创建一个页面:TreeSelect.vue
- 在router.js里配置TreeSelect页面的路由
{ path: '/treeselect', name: 'treeselect', component: () => import('./views/TreeSelect.vue') }- 在index.vue里添加一项
TreeSelect 分类选择器
至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了42个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示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里创建一个触发按钮：
轻提示根据需求，我们需要改变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就演示完了！庆祝一下我们又学完一个组件啦！
今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油
