mint-ui之toast使用（messagebox，indicator同理）

Posted 2020-10-23 美力

toast为消息提示框，支持自定义位置、持续时间和样式。

一,注意事项

方法1   引入整个 Mint UI 组件,并需要再次单独引入Toast组件

　　Toast，它并不是一个全局变量，需要先引入 import { Toast } from ‘mint-ui‘ 再使用

　　Toast(‘提示信息‘);

方法2 引入整个 Mint UI 不再单独引入Toast组件

  　　 this.$toast(‘提示信息‘);

　　　官方文档没写，但看下源码的index.js就找得到

　　   Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;

　　   Vue.$toast = Vue.prototype.$toast = Toast;

　　   Vue.$indicator = Vue.prototype.$indicator = Indicator;

　　 (所有引用插件的源码都在node_modules下面)

二,用法

   1.基本用法

  　　Toast(‘提示信息‘);

 　2.多配置用法

　　

let instance =Toast({ message: ‘提示‘, //提示内容分

       position: ‘bottom‘, //提示框位置
       duration: 5000 , //持续时间（毫秒），若为 -1 则不会自动关闭
       iconClass: ‘icon icon-success‘ , //icon 图标的类名
       className:‘addClass‘   //Toast 的类名。可以为其添加样式
});    

setTimeout(() => {

instance.close()

}, 2000)