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
的字体图标。
安装 bootstrapcnpm i [email protected] -D
在 main.js
文件导入:
// 导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
//导入自定义样式
import './css/app.css'
注意:我安装的 [email protected] 的版本,字体图标不会显示,有知道原因的可以指点一下,用3.x的版本就没有问题了!!!
效果图: