码迷,mamicode.com
首页 > 其他好文 > 详细

mint-ui之toast使用(messagebox,indicator同理)

时间:2018-02-06 12:53:17      阅读:16574      评论:0      收藏:0      [点我收藏+]

标签:his   sys   ring   java   ant   自动   set   node   ali   

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)

 

 

 

 

mint-ui之toast使用(messagebox,indicator同理)

标签:his   sys   ring   java   ant   自动   set   node   ali   

原文地址:https://www.cnblogs.com/zhaozhenzhen/p/8421518.html

(19)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!