创建组件“ovalshape”失败_vue2组件系列第四十六节：TreeSelect 分类选择

最新推荐文章于 2021-05-27 17:23:33 发布

weixin_39540178

最新推荐文章于 2021-05-27 17:23:33 发布

阅读量229

点赞数

文章标签：创建组件“ovalshape”失败

准备工作：

创建一个页面: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就演示完了！庆祝一下我们又学完一个组件啦！

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