Toast
一种无焦点的消息提示框,显示一段时间后会自行消失,多用于主动操作后的反馈提示。
基本用法
传入提示内容文字和显示时长两个参数
this.$toast(msg,during);
传入一个参数对象(唯一)
this.$toast(object);
示例
export default {
methods:{
showToast(msg,during){
this.$toast(msg,during);
},
showToast2(){
//以对象形式传参支持传入一个id,id相同的Toast共享一个实例对象
this.$toast({
msg:'我传了一个对象,包括id属性值,显示位置不居中,多行文字居左展示',
id:'demo',
center:false, //Toast位置不居中(默认居中)
textAlignCenter:false,//多行文字居左展示(默认居中)
fontSize:0.24, //字号单位rem
bgColor:'rgba(0,0,0,.6)', //背景颜色
bottom:1 //距窗口底部距离(单位rem),不居中展示时有效
});
},
showToast3(){
this.$toast({
msg:'我传了一个对象,且id值与上一个示例的id值相同,将与上一个示例共享一个实例',
id:'demo'
});
}
}
}
Options
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
msg | 提示文字 | String | — | — |
during | 展示时长(单位毫秒) | Number | 3000 | — |
object.msg | 提示文字 | String | — | — |
object.during | 展示时长(单位毫秒) | Number | 3000 | — |
object.customClass | 新增一个自定义class | String | '' | — |
object.center | Toast位置是否居中 | Boolean | true | — |
object.bottom | Toast距窗口底部距离(单位rem) | Boolean | true | object.center为false时生效 |
object.textAlignCenter | 文字折行时是否居中展示,默认居中 | Boolean | true | 值为false时居左 |
object.fontSize | 文字大小(单位rem) | Number | 0.28 | — |
object.bgColor | 背景颜色 | String | 'rgba(0, 0, 0, 0.7)' | — |