Mint-UI中的Toast提示框

在 Mint-UI 中，分为三部分组件：JS Components、CSS Components、Form Components

---

在mint-ui中，一般 JS Components 都需要按需引入。

---

在 上一篇 全局导入mint-ui和按需导入mint-ui，有详细的说。接下来直接看例子：

<template>
  <div>
    <h1>这是App组件h1>

    <mt-button type="danger" disabled icon="more">defaultmt-button>
    <mt-button type="primary" size="large" plain>defaultmt-button>
    <mt-button type="default" size="small" @click="show">defaultmt-button>

    <router-link to="/account">Accountrouter-link>
    <router-link to="/goodslist">GoodsListrouter-link>

    <router-view>router-view>
  div>
template>
<script>
// 一般mint-ui 中的 js组件，都需要按需引入
import { Toast } from "mint-ui";
export default {
  data: function() {
    return {
      // 把这个 Toast实例 注册到data中，只要在这个组件内部中，都能访问到
      toastInstanse: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      //模拟获取列表的一个 ajax 方法
      // 在获取数据之前，立即弹出 Toast 提示用户，正在加载数据
      this.show();
      setTimeout(() => {
        //在setTimeout中，要用箭头函数，否则会改变作用域
        // 当 3 秒过后，数据获取回来了，要把 Toast 移除
        this.toastInstanse.close();
      }, 2000);
    },
    show() {
      // 每当调用的时候，Toast 有一个返回值，这个返回值 重新赋值给 toastInstanse ,以至于后边手动关闭Toast
      this.toastInstanse = Toast({
        message: "2秒我就消失", //弹窗内容
        position: "middle", //弹窗位置
        duration: -1, //弹窗时间毫秒,如果值为-1，则不会消失
        iconClass: "glyphicon glyphicon-heart", //设置 图标类
        className: "mytoast" //自定义Toast 样式，需要自己提供一个类名
      });
    }
  }
};
script>
<style>
style>

自定义的样式代码，只改字体图标的颜色：
在根目录下创建一个css文件，然后创建你的 xxx.css 文件

.mytoast i{
    color: red !important;
}

---

注意：
在引用 icon 图标的时候，图标库必须自己准备，可以利用bootstrap的字体图标。

---

安装 bootstrap
cnpm i bootstrap@3 -D

在 main.js文件导入：

// 导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
//导入自定义样式
import './css/app.css'

注意：我安装的 [email protected] 的版本，字体图标不会显示，有知道原因的可以指点一下，用3.x的版本就没有问题了！！！

---

效果图：