简介

以编码的方式，简单模仿控制台命令行输出。 比如改下代码：

let str = `
	|<a:wrap speed="-1" crlf="false"><style>${[
			'.gray{color:#4d4d4d}',
			'.green{color:#4ebf22}'
		].join('')}</style>
	|</a:wrap>
	|☞  <a:undo delay="300">touc</a:undo>echo "\\<h1>Hello, world\\</h1>" > index.html
	|☞  <a:wrap delay="2000">echo "my-example-<a:wrap delay="500"></a:wrap>cast.surge.sh" > CNAME</a:wrap>
	|☞  surge ./
	|<a:wrap speed="-1" delay="500">
		|<a:wrap class="gray">             email:</a:wrap> [email protected]
		|<a:wrap class="gray">             token: *****************</a:wrap>
		|<a:wrap class="gray">      project path:</a:wrap> /Users/Kenneth/Desktop/temp-example
		|<a:wrap class="gray">              size:</a:wrap> 2 files, 47 bytes
		|<a:wrap class="gray">            domain:</a:wrap> my-example-cast.surge.sh
		|<a:wrap class="gray">            upload:</a:wrap> [====================] 100%, eta: 0.0s
		|<a:wrap class="gray">  propagate on CDN:</a:wrap> [====================] 100%
		|<a:wrap class="gray">             users:</a:wrap> [email protected]
		|<a:wrap class="gray">        IP address:</a:wrap> 192.241.214.148
		|
		|	<a:wrap class="green">Success!</a:wrap> Project is published and running at <a:wrap class="green">my-example-cast.surge.sh</a:wrap>
	|</a:wrap>
	|☞  <a:wrap delay="2000">exit</a:wrap>
`;
new Consolact({content:str, cstart : '|'}).print({$el:document.querySelector('.wrap')});

将输出如下图片所示：

标签（属性）

• a:wrap 通用标签，类似于div，通过使用标签属性控制输出
• a:undo 重写标签，模拟输入后删除
• a:spare 备用标签，类似于定义一个变量，定义时不会出现在输出中 |属性|类型:默认值|描述| |----|------------|---| |naem|string|定义一个名字以便后续使用|
• a:shift 替换标签，使用replace替换文本中的内容 |属性|类型:默认值|描述| |----|------------|---| | from |string | 需要替换的文本，支持re:开头表示正则表达式 | | to |string | 替换后的文本，支持@{name}引用a:spare标签 | | interval |number:0 | 指定来回替换时的间隔 | | relapse | number:0 | 来回替换的次数（from -> to -> from -> to....）| | relapsed | string | 需要替换的文本，支持[re:]开头的正则表达式 | | gradual | boolean:false | 当存在多个匹配项时，是否逐个替换 |

通用属性

|属性 |类型:默认值 |描述| |---- |------------ |--- | | speed | number:0 | 定义输出字符的速度，0表示使用默认（150ms/个），负数则表示立即输出 | | cstart | string | 指定每一行的起始符号 | | delay | number:0 | 指定延迟输出时间 | | crlf | boolean:false | 指定是否删除标签前后的换行符 |

使用

• node

  import Consolact from 'consolact';
  new Consolact({content:str}).print({$el:document.body})

• html

  <script src="consolact.js"></script>
  new Consolact({content:str}).print({$el:document.body})

Consolact

• 构造函数 constructor({content, cstart, interval=150}) | 参数 |类型:默认值 |描述| |---- |------------ |--- | | content | string | 原始内容 | | cstart | string | 指定每一行的起始符号 | | interval | number:150 | 输出字符的速度，单位毫秒 |
• print方法 print({$el, resolve, isWrap, cursor}) | 参数 |类型:默认值 |描述| |---- |------------ |--- | | $el | HTMLElement | 输出的容器 | | resolve | function | 可选，输出完成后的回调函数， | | isWrap | boolean:true | 是否使用pre标签包装输出内容 | | cursor | string:'_' | 指定每行最后闪烁的光标 |