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. node.js初识08

    1.模块的概念,在前端的世界里,jq和js的关系,在后台里就是express和原生node的关系, 2.每一个js里的函数都只在当前文件里起作用,如果你希望在其他js里调用这个函数,这么你需要在这个j ...

  2. LeetCode119.杨辉三角II

    给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 3 输出: [1,3,3,1] 进阶: 你可以优化你的算法到 O ...

  3. netframework转core时文件响应流问题

    做将framework webapi项目转成netcore平台上的webapi项目时,发现原来的返回文件响应流在netcore平台下失效.代码如下,返回pdf文件响应流,供前端显示 /// <s ...

  4. python 爬起点目录

    #目标:书名,简介,作者,字数 #首先确定源代码的列表 import urllib.request import re from bs4 import BeautifulSoup import ran ...

  5. 08 集合[11,22,33,44,55,66,77,88,99],将所有<66的值保存至字典的第一个key中,将所有>=66的值保存至字典的第二个key中。即:{'k1':<66的所有值,'k2':>=66的所有值}

    li = [11,22,33,44,55,66,77,88,99]dict = {'k1':[],'k2':[]}for i in li:    if i < 66:        dict[& ...

  6. EasyUI创建DataGrid及冻结列的两种方式

       第一种方式:通过HTML标签创建数据表格控件 <table class="easyui-datagrid" title="基本数据表格" style ...

  7. uvalive 3353 Optimal Bus Route Design

    题意: 给出n个点,以及每个点到其他点的有向距离,要求设计线路使得每一个点都在一个环中,如果设计的线路拥有最小值,那么这个线路就是可选的.输出这个最小值或者说明最小线路不存在. 思路: 在DAG的最小 ...

  8. 【Redis学习之五】Redis数据类型:列表和散列

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-2.8.18 一.列表 基于Linked Lis ...

  9. git使用遇到的坑

    把一个完整项目提交到github上步骤以及注意事项 Git的安装就不说了. 第一步:mkdir/cd 我们需要先创建一个本地的版本库(其实也就是一个文件夹). 你可以直接右击新建文件夹,也可以右击打开 ...

  10. HOG基本原理

    图像识别,图像预处理,HOG算法介绍. 转自: https://blog.csdn.net/gy429476195/article/details/50156813