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. 文档设计也需要坚持DRY原则--支付中心应用部署结构图完善

    今天上午,我拿着支付中心的设计文档,给入职不久的同事讲解目前支付中心系统的应用部署情况.当时同事嗯嗯地点头反应. 下午呢,发现自己设计的有问题,赶紧给予完善. 代码重构方面讲究DRY编程原则.我们在设 ...

  2. ubuntu 安装/卸载nginx及常用命令

    安装命令 sudo apt-get update #更新apt sudo apt-get install nginx #安装nginx 启动/重启/停止命令 一. /etc/init.d/nginx ...

  3. django admin 处理文本换行空格

    使用 linebreaks filter <p>{{ blogpassage.content|linebreaksbr }}<p>

  4. git server 配置

    因为后面要采用Git代替Subversion,花了点时间配置了Git服务端和客户端,像以前一样,仍然基于最新的Ubuntu11.10 server/desktop系统. 感谢这几篇文章的作者: htt ...

  5. mouseTracking

    [1]mouseTracking 追踪鼠标的标志位 作用:保存窗口部件默认是否接收鼠标移动事件.此成员变量在QWidget类中. [2]Qt Assistant 解释 翻译如下: 这个属性保存部件窗口 ...

  6. HashMap的底层实现原理

    HashMap的底层实现原理1,属性static final int MAX_CAPACITY = 1 << 30;//1073741824(十进制)0100000000000000000 ...

  7. 什么是ASCII

    以下内容是从百度百科学的 1)ASCII(American Standard Code for Information Interchange:美国信息交换标准代码) 2)产生原因 在计算机中,所有的 ...

  8. 使用QFileDiaglog实战designer快速开发

    今天遇到一个大坑很久才解决 使用designer开发出图形界面转换为py文件后,使用QFileDialog对话框第一个参数一定要是当前窗口组件,否则程序直接奔溃(坑:能运行不报错但奔溃) def ge ...

  9. python type的用法

    目录 描述 语法 用法 type和isinstance Type和Object 描述 python的 type 函数有两个用法,当只有一个参数的时候,返回对象的类型.当有三个参数的时候返回一个类对象. ...

  10. AELF(ELF)区块链项目介绍

    AELF(ELF)区块链项目介绍,Aelf在交易所上的名称是ELF,最近涨了不少了,可以长期关注逢低建仓,根据自身情况可以适当轻仓配置点.AELF总结下来就是希望打造一个B2B的区块链开放式OS系统. ...