效果展示
实现步骤
1. 新建js文件 定义一个类 用于提供控制台打印日志显示样式的方法
src\libs\util.log.js
class Logger {
// 定义静态方法
static typeColor(type = "default") {
let color = "";
switch (type) {
case "default":
color = "#35495E";
break;
case "primary":
color = "#3488ff";
break;
case "success":
color = "#43B883";
break;
case "warning":
color = "#e6a23c";
break;
case "danger":
color = "#f56c6c";
break;
default:
break;
}
return color;
}
static capsule(title, info, type = "primary") {
console.log(
`%c ${title} %c ${info} %c`,
"background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;",
`background:${this.typeColor(
type
)}; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;`,
"background:transparent"
);
}
static colorful(textArr) {
console.log(
`%c${textArr.map((t) => t.text || "").join("%c")}`,
...textArr.map((t) => `color: ${this.typeColor(t.type)};`)
);
}
static default(text) {
this.colorful([{ text }]);
}
static primary(text) {
this.colorful([{ text, type: "primary" }]);
}
static success(text) {
this.colorful([{ text, type: "success" }]);
}
static warning(text) {
this.colorful([{ text, type: "warning" }]);
}
static danger(text) {
this.colorful([{ text, type: "danger" }]);
}
static admin(text) {
let info = `这是我的证明标记`;
this.colorful([{ text: info, type: "primary" }]);
}
}
export default Logger;
2. main.js中 引入并使用
import Logger from "./libs/util.log";
Logger.capsule(import.meta.env.VITE_APP_WEB_TITLE, import.meta.env.VITE_APP_WEB_VERSION);
Logger.capsule('当前环境', import.meta.env.MODE);
Logger.admin()