网页 Shell 模拟器

在网页中模拟 shell 的工具。

安装

npm install --save-dev @wings-j/web-shell-simulator

使用

复制dist目录下的index.js到代码中，使用 esm 或 script 方式（注入类WebShellSimulator）引入。

import WebShellSimulator from '@wings-j/web-shell-simulator'

<script src="./dist/index.umd.js"></script>

示例

Demo

let shell = new WebShellSimulator({}, { overflow: 'hidden', width: '100%', height: '100%', 'padding-bottom': '100px', 'font-size': '16px' })

document.addEventListener('DOMContentLoaded', () => {
  shell.mount('body')
})

let res

shell.addLine('Web Shell Simulator', { color: '#2266ff' })
shell.addBlank()
shell.addLine('Input something, confirm with enter ...')
res = await shell.addInput().promise
shell.addLine(`Input result: ${res}`)
shell.addLine('Select one, move with up and down ...')
res = await shell.addSelect(['a', 'b', 'c']).promise
shell.addLine(`Select result: ${res}`)
shell.addLine('Select some, check with space ...')
res = await shell.addSelect(['a', 'b', 'c'], { multi: true }).promise
shell.addLine(`Select result: ${res.join(', ')}`)

API

WebShellSimulator

属性

• dom：DOM
• elements：所有元素集合

构造方法

new WebShellSimulator(config, style)

参数：

• config：配置
  • mouse：使能鼠标点击事件
• style：样式。CSS 属性对象。

挂载

mount(selector: string): void

参数：

• selector：选择器

清空

clear(): void

添加空行

addBlank(): { element: Blank, promise: Promise<void>}

返回：

• element：元素

添加文本行

addLine(text: string, config): {element: Line, promise: Promise<void>}

参数：

• text：字符串。文本
• config：配置
  • color：字符串。颜色
  • typing：布尔。打字动画
  • typingPeriod：数字。打字动画周期
  • html：渲染 HTML

返回：

• element：元素

添加输入

addInput(config): {element: Input, promise: Promise<string>}

参数：

• config：配置
  • color: 颜色
  • prefix: 前缀
  • padding: 前缀后边距
  • value: 预设值
  • callback: 回调。传递输入值
  • removeOnEnter: 回车后移除

返回：

• element：元素
• promise：输入 Promise

添加选择

addSelect(selections: string[], config): {element: Select, promise: Promise<string|string[]>}

参数：

• config：配置
  • color：颜色
  • multi：是否多选
  • singlePositive：单选选中前缀
  • singleNegative：单选未选中前缀
  • multiPositive：多选选中前缀
  • multiNegative：多选未选中前缀
  • padding：左边距
  • callback: 回调。传递选中的选项
  • removeOnEnter: 回车后移除

返回：

• element：元素
• promise：选择 Promise

添加表格

addTable(data: (string|number)[][], config): {element: Table, promise: Promise<void>}

参数：

• data：数据
• config：配置
  • color：字符串。颜色
  • padding：单元格右边距

返回：

• element：元素

Element

所有添加方法返回 Element 的子类（Line，Blank 等）。

属性

• dom：DOM
• active：激活状态

挂载元素

mount(): void

删除元素

remove(): void