Vue使用ANSI更改元素颜色
文章目录
Vue中使用ANSI转义来填充颜色
导语
本文主要介绍的是通过ansi转义来填充网页中元素颜色的方法。
一般元素颜色都是写在css中,通过ansi可以自定义方法来实现不同的文本内容显示不同颜色。当然,自己套一个输出整个元素的自定义方法也行
ANSI转义简述
wiki上有详述。简单来说,终端上一般均使用ansi编码格式。如果要显示特定的文字颜色或背景色,均可通过插入对应转义符实现。
Wiki-ANSI
ANSI颜色表
颜色 | 前景色代码 | 背景色代码 |
---|---|---|
黑 | 30 | 40 |
红 | 31 | 41 |
绿 | 32 | 42 |
黄 | 33 | 43 |
蓝 | 34 | 44 |
品红 | 35 | 45 |
青 | 36 | 46 |
白 | 37 | 47 |
亮黑(灰) | 90 | 100 |
亮红 | 91 | 101 |
亮绿 | 92 | 102 |
亮黄 | 93 | 103 |
亮蓝 | 94 | 104 |
亮品红 | 95 | 105 |
亮青 | 96 | 106 |
亮白 | 97 | 107 |
Vue使用
安装
在Vue项目文件夹中命令行输入
npm install ansi-to-html
Npm-ansi-to-html
使用
|
|
其中\x1b[....m]
是一套转义符,在[
和m
中插入想要显示的颜色数字即可
|
|