还记得这篇文章吗？当vue3-tree-org当vue3-tree-org成功实例化后，在控制台上会展示一个较为漂亮的打印信息，如下图。
诶？这又是怎么实现的呢？今天就来分享一下。
答案
在浏览器的控制台中，可以通过console.log配合%c占位符和css样式，就可以自定义打印样式。
比如:
1 | console.log("%c梨的前端小屋", "color: #fff;background-color: #2d8cf0;padding: 2px 4px;border-radius: 4px;") |
可以看到如下效果
甚至还可以加入图标
1 | console.log("%c 🔥 %c 梨的前端小屋","font-size: 24px; padding-right: 5px;","color: #2d8cf0; font-weight: bold;"); |
样式目前支持如下
| 属性 | 说明 | 示例值 |
|---|---|---|
| color | 文字颜色 | red, #FF0000, rgb(255,0,0) |
| background | 背景色/渐变 | yellow, linear-gradient(90deg, blue, red) |
| font-size | 字体大小 | 20px, 2rem |
| font-weight | 字体粗细 | bold, 700 |
| font-family | 字体 | “Arial”, monospace |
| padding | 内边距 | 10px, 5px 10px |
| border | 边框 | 1px solid red, 3px dashed #00f |
| border-radius | 圆角 | 5px, 50% |
| text-decoration | 文本装饰 | underline, line-through |
| text-shadow | 文字阴影 | 2px 2px 4px black |
| margin | 外边距 | 10px 0 |
哦对了，我最近开发了一个叫
牛马工作器的chrome拓展插件，很好玩哦，感兴趣的话，给我的公众号回复牛马即可免费获取。
