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

使用

1
2
3
4
5

// NPM Demo
var Convert = require('ansi-to-html');
var convert = new Convert();
 
console.log(convert.toHtml('\x1b[30mblack\x1b[37mwhite'));

其中\x1b[....m]是一套转义符，在[和m中插入想要显示的颜色数字即可

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// Vue中使用
<template>
	<div>
		...
		<div v-html="demo_function">
	</div>
</template>

<script>
import Convert from 'ansi-to-html'
const convert = new Convert()

export default {
	...
	methods: {
		demo_function() {
			return convert.toHtml('\x1b[31m' + '这是显示为红色')
		}
	}
}
<script>