关于museui 使用toast 和Message 插件，图标不显示问题

本文以vue+museui为例子

首先使用npm 安装museui 和 toast 、message插件

//安装 museui
npm i muse-ui -S
//安装toast插件
npm install muse-ui-toast -S
//安装message插件
npm install -S muse-ui-message

然后 在 main.js 中添加

import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);
const ToastOption = {
    position: 'top', // 弹出的位置
    time: 2000, // 显示的时长
    closeIcon: 'close', // 关闭的图标
    close: true, // 是否显示关闭按钮
    successIcon: 'check_circle', // 成功信息图标
    infoIcon: 'info', // 信息信息图标
    warningIcon: 'priority_high', // 提醒信息图标
    errorIcon: 'warning' // 错误信息图标
}
import Toast from 'muse-ui-toast';
Vue.use(Toast, ToastOption);

import Message from 'muse-ui-message';
import 'muse-ui-message/dist/muse-ui-message.css';
Vue.use(Message);

这时候 组件中调用$toast.error()和$message.error()方法弹出的提示中图标都是不显示的,后来发现需要引入一个css图标文件

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"/>    

这样就可以了

仅做学习记录，同时希望能帮到遇见这个问题的你。

转载于:https://www.cnblogs.com/ITQB/p/9959361.html