npm

log_text
TypeScript icon, indicating that this package has built-in type declarations

2.0.7 • Public • Published

这是一个在浏览器上花式打印的项目,可以打印图片和文字,并且可以设置打印的颜色,支持配置文件,以及多人配置。

使用配置文件的情况需要在vite项目使用

如何使用

引入方法

    npm i log_text -S

使用方法

1.首先在vite.config.js引入

import jsonInjectorPlugin from "log_text/config"

2.在项目根目录下创建config.json文件,并可以添加以下options配置

    //默认配置:
    {
        "enabled": true,/* 是否开启打印 */
        "hasborder": true,/* 打印的内容是否有边框 */
        "heightLight": false,/* 内容颜色是否为亮色 */
        "maxDepth": 12,// 打印的最大深度
        "production": false, // 在项目打包后是否开启打印
        "onlineProduct": {
            "enabled": false, // 是否开启线上打印 默认为 false
            "gitBranchInclude": ["master", "main"], // 线上打印的分支名字, 默认为空数组,表示没有线上分支支持打印
        },
        "use": {
            "userList": [
                {
                    "name": "user1", // 用户名
                    "avatar": "https://xxx.xxx.xxx/xxx.png" // 用户头像
                }
            ], // 用户列表
            "userBaseLogs":{
                "user1": {
                    ....// 用户的基础配置 除了use之外的配置都可以使用
                }
            } 
	    },
        "img": {
            "maxHeight": 300,/* 打印图片在控制台最大的高度 */
            "maxWidth": 400,/* 打印图片在控制台最大的宽度 */
        },
        "base":{
            "title": "Base",/* 打印的题目 */
            "titleColor": "white",/* 题目的颜色 */ /* 颜色的支持英文颜色(比如:yellow) 和 HEX格式(比如#fff 或者 #ffffff) */
            "contentColor": "grey", /* 内容区的颜色 */
            "backgroundColor": "grey",/* 背景颜色 */
            "borderColor": "grey", /* 边框颜色 */
        },
        "info":{
            "title": "Info",/* 打印的题目 */
            "titleColor": "white",/* 题目的颜色 */ /* 颜色的支持英文颜色(比如:yellow) 和 HEX格式(比如#fff 或者 #ffffff) */
            "contentColor": "grey", /* 内容区的颜色 */
            "backgroundColor": "grey",/* 背景颜色 */
            "borderColor": "grey", /* 边框颜色 */
        },
        "error": {
            "title": "error",
            "titleColor": "white",
            "contentColor": "red",
            "backgroundColor": "red",
            "borderColor": "red",
        },
        "success": {
            "title": "success",
            "titleColor": "white",
            "contentColor": "green",
            "backgroundColor": "green",
            "borderColor": "green",
        },
        "warning": {
            "title": "warn",
            "titleColor": "white",
            "contentColor": "orange",
            "backgroundColor": "orange",
            "borderColor": "orange",
        }
    }

3.并且在vite.config.js中添加

    plugins:[
        jsonInjectorPlugin({
            path: './config.json',
        })
    ]

在需要使用的地方引入

import log from 'log_text'

4.调用方法

    import log from 'log_text'
    //content为打印的内容,name为打印的名称
    log(content,?name); //options选项的base配置会修改此方法打印的内容

    log.info(content,?name); 
    log.error(content,?name); 
    log.success(content,?name); 
    log.warning(content,?name); 

    log.equal(value1,value2); //value1和value2为需要比较的值

    log.picture(src);  //src为图片的路径,确保图片服务器开启跨域请求
	log.setconfig(options); //options为配置项,在调用此方法后的所有打印都按照此配置项进行打印

多人协作开发使用方法

请在use配置项中配置userList选项和userBaseLogs选项 在调用的时候需要 logfunc.name 的形式调用,name为userList中配置的name

    //例如在config.json中配置
    "use":{
        "userList":[
            {
                "name":"xxk123",
            },
            {
                "name":"xxk1234",
            }
        ],
        "userBaseLogs":{
            'xxk123':{
                "base":{
                    "title":"xxx"
                }
            }
        }
    }
    //在调用的时候
    logfunc.xxk123(content,?name);

Readme

Keywords

Package Sidebar

Install

npm i log_text

Weekly Downloads

13

Version

2.0.7

License

ISC

Unpacked Size

199 kB

Total Files

11

Last publish

Collaborators

  • xxk123