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">default</mt-button>
    <mt-button type="primary" size="large" plain>default</mt-button>
    <mt-button type="default" size="small" @click="show">default</mt-button>

    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">GoodsList</router-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的版本就没有问题了！！！

效果图：
在这里插入图片描述

Mint-UI中的Toast提示框

猜你喜欢