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同理)的更多相关文章

  1. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

  2. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  5. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  6. vue mint UI

    vue 与mint  UI 结合开发手机app  html5页面 api  文档   http://mint-ui.github.io/#!/zh-cn

  7. 新建一个基于vue.js+Mint UI的项目

    上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...

  8. iView webapp / Mint UI / MUI [前端UI]

    前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...

  9. Mint UI 使用指南

    上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...

随机推荐

  1. Xcode $(SRCROOT)和$(PROJECT_DIR)区别

    $(SRCROOT)代表的时项目根目录下 $(PROJECT_DIR)代表的是整个项目 PS:往项目添加文件时,例如.a等,要先show in finder ,复制到项目中,然后再拖到xcode项目中 ...

  2. laravel service provider

    https://laravel-china.org/articles/6189/laravel-service-provider-detailed-concept https://oomusou.io ...

  3. linux如何在不重新登录用户的情况下使用户加入的组生效

    这个问题在很早之前就遇到了,之前的解决方法是登出用户再登录用户.今天在配置virtualbox的过程中又遇到了同样的问题.于是又进行了一番搜索. 找到了如下答案: https://stackoverf ...

  4. uva11990 动态逆序对

    这题说的是给了一个数组,按照他给的顺序依次删除数,在删除之前输出此时的逆序对个数 我们用Fenwick树 维护这整个数列, C[i]是一个 treap的头, 管理了在树状数组中 能影响他的点,然后我们 ...

  5. 如何在Sitecore CMS中管理桌面快捷方式

    当您在Sitecore的桌面模式下工作时,创建快捷方式很有用.快捷方式允许您在选择特定项目的情况下打开内容编辑器,而无需深入了解内容树. Sitecore 8 Sitecore 7 Sitecore ...

  6. python 试题归纳及答疑 更新中.....

    一.Python基础篇(80题) 1.你为什么学习Python? 一.答题思路 1.阐述 python 优缺点 2.Python应用领域说明 3.根据自身工作情况阐述为什么会使用python 1)py ...

  7. multiprocessing 源码解析 更新中......

    一.参考链接 1.源码包下载·链接:   https://pypi.org/search/?q=multiprocessing+ 2.源码包 链接:https://pan.baidu.com/s/1j ...

  8. ASP.Net 获取Form表单值

    新建一HtmlPage1.html,如下post发送() <body> <form enctype="multipart/form-data" action=&q ...

  9. Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp

    1.问题场景描述:后台方法中执行查询返回list列表中,执行后台产生运行时异常 java.sql.SQLException: 2.问题排查和解决:排查代码,无编译时错误,断点调试,更具控制台找到对应的 ...

  10. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...