Mind UI Vue

# Toast 提示

# 介绍

在页面中弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

# 单独引用

Toast 是一个函数，调用后会直接在页面中弹出相应的提示框。

import { Toast } from 'mind-ui-vue';
Vue.use(Toast);

# 全局方法

如果你完整引入了 Mind UI Vue，它会在 Vue.prototype 上添加全局方法 $toast。

# 示例

# 基础用法

this.$toast("这是一条默认提示");

# 自定义位置

Toast 默认渲染在屏幕正中位置，通过 position 属性可以控制 Toast 展示的位置，当前支持 middle、top、bottom 三种值。

// 成功提示
this.$toast({
  message: "顶部提示",
  position: "top"
});

# 图片提示

this.$toast({
  message: "使用自定义图片",
  image: "https://note-file.ixook.com/FkwInL0tWpqDeRNtYHMfmaHlioTq",
});

# 自定义通知时长

自定义消息通知展示时长。

this.$toast({
  content: "我将在 5 秒后消失",
  duration: 5000,
});

# 加载状态

this.$toast({
  message: "加载中",
  type: "loading"
});

# Api

# Methods

参数 说明 类型 可选值 默认值
type 类型 String loadinng —
position 位置 String top center bottom center
duration 显示时间, 毫秒。设为 0 则不会自动关闭 Number — 2000
mask 是否显示遮罩层 Boolean — false
message 提示内容 String — —
image 图片地址 String — —
icon 图标名称 String — —
iconSize 图标大小，单位 px Number — 80
iconColor 图标颜色 String — #fff
zIndex 层级 Number — 2001

# Events

调用 Toast 会返回当前 Toast 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名称 说明
close 关闭当前 Toast

← Message 消息提示 →