Toast 吐司请使用手机扫码体验

轻提示。

基本用法

javascript
export default {
  mounted() {
    this.$toast.text('提示信息');
  }
}

高级用法

第二个参数是一个对象，可以传入一些高级配置。

javascript
export default {
  mounted() {
    this.$toast.text('提示信息',{
        duration: 4000, //展示时长
        center: true, //是否居中展示，值为false时展示在页面底部
        bottom: 40, //展示在页面底部时，距底部的距离（px)
        textAlignCenter:true //多行文本是否居中展示，值为false时单行居中，多行居左
    });
  }
}

带ICON

成功提示

javascript
export default {
  mounted() {
    this.$toast.success('操作成功！');
  }
}

失败提示

javascript
export default {
  mounted() {
    this.$toast.fail('操作失败！');
  }
}

警告提示

javascript
export default {
  mounted() {
    this.$toast.warn('确定删除？');
  }
}

加载提示

javascript
//Loading类型，默认不会自动消失，带透明遮罩
this.loading = this.$toast.loading();
//手动关闭上面的Loading
this.loading.hide();
//带文字，自动消失，不要遮罩
this.$toast.loading('加载中...',{ 
    duration:3000,
    cover:false
});

共享实例

Toast的id如果相同，将共享一个实例。如果不设置id，多个Toast将拥有相同的id默认值，它们将共享一个实例（loading类型与其他类型实例不共享），新的内容和设置将取代旧的，多个Toast不能同时出现。如果不需要共享实例，可以给其设置id。

javascript
//二者id不同，不会共享一个实例
this.$toast.success(msg,{
    id:123
});
this.$toast.text(msg,{
    id:321,
    duration:4000
});

自定义样式

javascript
//自定义背景颜色/透明度
this.$toast.text('提示文案',{
    bgColor:'rgba(50, 50, 50, 0.9)'
});
//自定义字号，'small'/'base'/'large'三选一
this.$toast.text('提示文案',{
    size:'small'
});
//自定义class
this.$toast.text('提示文案',{
    customClass:'my-class'
});

API