Toast('提示文案');
Toast({
type: 'loading',
message: '加载中...'
});
Toast.success('成功文案');
Toast.fail('失败文案');
方法名 | 参数 | 返回值 | 介绍 |
---|---|---|---|
Toast | options/message |
toast 实例 | 展示提示 |
Toast.loading | options/message |
toast 实例 | 展示加载提示 |
Toast.success | options/message |
toast 实例 | 展示成功提示 |
Toast.fail | options/message |
toast 实例 | 展示失败提示 |
Toast.close | close: Boolean |
Void |
关闭提示 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 提示类型,可选值为loading success fail close normal colorful html |
String |
text |
position | 位置,可选值为 top bottom |
String |
middle |
duration | 展示时长(ms) | Number |
3000 |
mask | 是否显示背景遮罩层 | Boolean |
true |
transition | 提示开场动画,可选值为slide-down slide-up slide-left slide-right |
String |
fade |
bgContent | 提示内容的背景颜色,可选值为white transparent |
String |
black |
background | 遮盖层的背景,支持十六进制和rgb格式 | String |
rgba(0, 0, 0, 0.3) |
colorText | 色彩文案,只限于type为colorful 使用 |
String |
- |
color | 色彩文案颜色,只限于type为colorful 使用 |
String |
#F89516 |
title | 标题,只限于type为normal 使用 |
String |
- |
icon | 加载的图标,只支持svg | String |
loading |
size | 加载的图标大小 | Number |
48 |
isClose | 主动关闭加载提示 | Boolean |
false |
animation | 是否开启加载的,只限于type为loading | Boolean |
false |
animationName | 开启加载的动画,只限于type为loading | String |
- |
<pl-step :active="active" active-text-color="#313131">
<pl-steps>预约成功</pl-steps>
<pl-steps>预约专家</pl-steps>
<pl-steps>正在服务</pl-steps>
<pl-steps>完成服务</pl-steps>
</pl-step>
<van-button type="default" @click="handleNext">下一步</van-button>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
active | 当前步骤 | Number |
0 |
active-svg | 自定义激活状态底部图标,详见svg组件 | String |
checked |
dot-svg | 自定义未激活状态底部图标,详见svg组件 | String |
dot-circle |
active-text-color | 自定义激活状态颜色 | String |
#268AED |
active-line-color | 自定义激活线束颜色 | String |
#268AED |
npm install
npm run serve
npm run build
npm run test
npm run lint