vue网页端控制台展示独有标记

news2024/11/24 17:15:24

效果展示

实现步骤

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()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1678971.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Lambda 表达式详解

LAMBDA ⚪ λ 希腊字母表中排序第十一位的字母, 英语名称为Lambda ⚪ 避免匿名内部类定义过多 ⚪ 其实质属于函数式编程的概念 ⚪ 也可称为闭包 ⚪ Lambda允许把一个函数作为方法的参数(函数作为参数传递进方法中)。 Lambda是在jdk8之后出现的所以现…

Xed编辑器开发第一期:使用Rust从0到1写一个文本编辑器

这是一个使用Rust实现的轻量化文本编辑器。学过Rust的都知道,Rust 从入门到实践中间还隔着好几个Go语言的难度,因此,如果你也正在学习Rust,那么恭喜你,这个项目被你捡到了。本项目内容较多,大概会分三期左右陆续发布&a…

WebLogic SSL应用

SSL 安全套接字层(SSL)是通过在客户端和Web服务器端之间进行身份验证,并对双方交换的数据进行加密,从而提供安全连接。 验证类型: 单向:客户端验证Web服务器端证书 双向:客户端验证Web服务器证书, Web服务器验证客户端证书 Weblogic Server12c 支持 SSL 3.0 和 TLS1.0 …

HCIP【Hybird实验】

目录 一、实验拓扑图: 二、实验要求: 三、实验思路: 四、实验过程: 1、配置PC的IP地址(不用配置网关,这个拓扑图没有使用到三层设备) 2、交换机配置 3、PC间进行测试: 一、实…

如何设计实用的ITSM自助服务台

在现代IT服务管理(ITSM)领域中,自助服务台已成为IT运维环境的核心组件。它作为企业内部信息中心与其他部门用户之间的桥梁,一个以用户为中心的平台,更注重用户的自主性和自助能力,使用户能够直接访问所需的…

ModuleNotFoundError: No module named ‘openpyxl‘的解决方案

问题描述: ModuleNotFoundError: No module named ‘openpyxl’ 这个错误表示你的 Python 环境中没有安装 openpyxl 这个模块。openpyxl 是一个用于读写 Excel 2010 xlsx/xlsm/xltx/xltm 文件的 Python 库。 解决方案: 要解决这个问题,你需…

第十四届蓝桥杯大赛软件赛国赛C/C++ 大学 B 组 抓娃娃

//前缀和 #include<bits/stdc.h> using namespace std; #define int long long const int n1e611; int a,b,c,d[n],l,r; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a>>b;map<int,int>t;for(int i1;i<a;i){cin>…

PCIe协议之-TLP Header详解(二)

✨前言&#xff1a; 在PCIe中&#xff0c;存在几种不同类型的请求&#xff0c;主要包括IO(Request)请求、存储器(Request)请求和配置(Request)请求。这些请求类型允许CPU与连接在PCIe总线上的设备进行通信和控制。 &#x1f31f;1. IO(Request)请求 定义与作用: IO请求&…

武汉星起航深耕亚马逊跨境领域,助全球卖家实现国际销售新突破

随着全球贸易的日益繁荣和互联网的快速发展&#xff0c;跨境电商行业迎来了前所未有的发展机遇。作为全球领先的电商平台&#xff0c;亚马逊以其丰富的商品品类、全球配送网络以及高效的物流体系&#xff0c;成为了众多卖家拓展国际市场的重要渠道。在这一背景下&#xff0c;武…

邦注科技 即热式节能模温机的原理及应用介绍

模温机是一种用于控制模具温度的设备&#xff0c;它在各种工业领域中发挥着重要作用&#xff0c;特别是在塑料加工行业中。以下是关于模温机的原理及应用的详细介绍&#xff1a; 原理 模温机的工作原理主要是通过加热和冷却功能&#xff0c;维持模具温度在一个恒定的范围内。…

银河麒麟操作系统下使用QT连接TiDB数据库开发步骤

目标:实现项目软件+硬件都运行在国产化操作系统平台上。 方法:在虚拟机中安装麒麟系统V10Sp1+Qt5.14.2+MySql8.0+TiDB软件,编译MySql驱动,测试连接TiDB数据库项目。 步骤: 1、使用虚拟机软件VMWare安装银河麒麟操作系统。 2、在银河麒麟系统上安装QT5.14.2软件。 3、…

WS2812C是一款将控制电路和RGB芯片集成在一个5050元器件封装中的智能控制LED光源

一般说明 WS2812C是一款将控制电路和RGB芯片集成在一个5050元器件封装中的智能控制LED光源。内部包括智能数字端口数据锁存器和信号整形放大驱动电路。还包括一个精密的内部振荡器和一个 12V电压可编程恒流控制部分&#xff0c;有效保证像素点光源颜色高度一致。 …

渲染农场是什么意思?瑞云渲染为你解答

渲染农场是一种通过集合多台计算机的计算能力来加速图像渲染过程的系统。它尤其适用于动画、电影特效和高端视觉效果的制作&#xff0c;这些领域通常需要处理非常复杂和计算密集型的渲染任务。 渲染农场就是一大群电脑&#xff0c;他们一起可以快速渲染出漂亮的图像。在做动画片…

Java05基础 数组

Java05数组 一、数组 数组指的是一种容器&#xff0c;可以用来存储同种数据类型的多个值。 1、数组的静态初始化 初始化&#xff1a;就是在内存中&#xff0c;为数组容器开辟空间&#xff0c;并将数据存入容器中的过程 1.1 数组定义格式 //格式一 数据类型[] 数组名 …

2024最新互联网公司工作时长排行榜出炉!

“工作时长”&#xff0c;是选择公司的一个非常重要的参考指标。 我们在选择一个公司的时候&#xff0c;除了需要关注总收入package 以外&#xff0c;还需要考虑这家公司的加班时长是否人性化。 我们的工作时长是周工作小时数。法定工作时间是40小时(955)。大小周通常折算为周…

高质量新闻数据集OpenNewsArchive:880万篇主流新闻报道,国产大模型开源数据又添猛料

在构建国产大语言模型的道路上&#xff0c;高质量新闻是不可或缺的重要语料之一。这类语料集准确性、逻辑性、时效性于一体&#xff0c;同时包含丰富的事实知识&#xff0c;可以大幅提升模型的文本生成质量、词汇表达能力、事件理解分析能力以及时序内容的适应性和预测能力&…

UE4_环境_局部雾化效果

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff01;祝愿大家生活越来越好&#xff01; 本文重点介绍下材质节点SphereMask节点在体积雾中的使用方法。 一、球体遮罩SphereMask材质节点介绍&#xff1a; 球体蒙版&#xff08;SphereMask&#xff09; 表达式根据距…

云端储存的笔记软件, 效率翻倍的办公小助手

在繁忙的办公环境中&#xff0c;文件堆积如山&#xff0c;电脑屏幕上贴满了各色便签&#xff0c;电话铃声、邮件提示声此起彼伏。你努力地在这些混乱中寻找一丝头绪&#xff0c;试图把握住工作的节奏。 然而&#xff0c;传统的方法似乎已经无法满足现代高效工作的需求。想象一…

特斯拉全自动驾驶(FSD)系统发展与解析

引言 自动驾驶技术在近年来迅猛发展&#xff0c;多家科技巨头和汽车制造商纷纷投入巨资研发&#xff0c;试图领跑这一未来出行的革命。在众多企业中&#xff0c;特斯拉的全自动驾驶&#xff08;Full Self-Driving, FSD&#xff09;系统以其独特的“纯视觉”策略脱颖而出&#…

webpack优化构建体积示例-并行压缩:

uglifyjs-webpack-plugin和terser-webpack-plugin都可以开启多进程并进行压缩来减小构件体积大小。 当在 Webpack 配置中启用 minimize: true 时&#xff0c;构建时间通常会增加&#xff0c;这是因为 Webpack 会在构建过程中添加一个额外的步骤&#xff1a;代码压缩。代码压缩是…