1、引入依赖
import {
Terminal
} from 'xterm'
import 'xterm/dist/xterm.css'
2、 实例化
let term = new Terminal({
rendererType: "canvas", //渲染类型
rows: 40, //行数
convertEol: true, //启用时,光标将设置为下一行的开头
scrollback:10,//终端中的回滚量
disableStdin: false, //是否应禁用输入。
cursorStyle: 'underline', //光标样式
cursorBlink: true, //光标闪烁
theme: {
foreground: 'yellow', //字体
background: '#060101', //背景色
cursor: 'help',//设置光标
}
})
term.open(document.getElementById('app'))
具体的配置,可以参考xterm的配置
3、尝试
term.writeln(`✔ Installed 1 packages
✔ Linked 0 latest versions
✔ Run 0 scripts
Recently updated (since 2019-05-10): 1 packages (detail see file
/Users/baolilei/Desktop/project/felab/xterm.js/fe-source-stage/src/xterm/node_modules/.recently_updates.txt)
Today:
→ xterm@*(3.13.1) (01:15:03)
✔ All packages installed (1 packages installed from npm registry, used 1s(network 1s), speed 365.87kB/s, json
1(7.12kB), tarball 509.49kB)`)
![](https://i-blog.csdnimg.cn/blog_migrate/c2b4fbbf0ff6b5aff4559ea3ef9c7175.png)
4、编写按键
// 版本4.9.0
function runFakeTerminal () {
if (term._initialized) {
return
}
term._initialized = true
term.prompt = () => {
term.write('\r\n$ ')
}
term.writeln('Welcome to xterm.js')
term.writeln('This is a local terminal emulation, without a real terminal in the back-end.')
term.writeln('Type some keys and commands to play around.')
term.writeln('')
term.prompt()
term.onKey(e => {
console.log(e)
const ev = e.domEvent
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
if (ev.keyCode === 13) {
term.prompt()
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (term._core.buffer.x > 2) {
term.write('\b \b')
}
} else if (printable) {
term.write(e.key)
}
})
}
runFakeTerminal()
如果是旧版本的,是这样的
function runFakeTerminal() {
if (term._initialized) {
return;
}
term._initialized = true;
term.prompt = () => {
term.write('\r\n$ ');
};
term.writeln('Welcome to xterm.js');
term.writeln('This is a local terminal emulation, without a real terminal in the back-end.');
term.writeln('Type some keys and commands to play around.');
term.writeln('');
term.prompt();
term.on('key', function (key, ev) {
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;
console.log(key,ev.keyCode);
console.log(term._core.buffer.x);
if (ev.keyCode === 13) {
term.prompt();
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (term._core.buffer.x > 2) {
term.write('\b \b');
}
} else if (printable) {
term.write(key);
}
});
term.on('paste', function (data) {
term.write(data);
});
}
runFakeTerminal();
![](https://i-blog.csdnimg.cn/blog_migrate/0b4e6682ea0761447f82db7aadb9871e.png)
5、vue中使用demo如下:
<template>
<div id="app" class="app-box">Hello</div>
</template>
<script>
import {
Terminal
} from 'xterm'
import 'xterm/css/xterm.css'
export default {
name: 'app',
mounted () {
const term = new Terminal({
rendererType: 'canvas', // 渲染类型
rows: 40, // 行数
convertEol: true, // 启用时,光标将设置为下一行的开头
scrollback: 10, // 终端中的回滚量
disableStdin: false, // 是否应禁用输入。
cursorStyle: 'underline', // 光标样式
cursorBlink: true, // 光标闪烁
theme: {
foreground: 'yellow', // 字体
background: '#060101', // 背景色
cursor: 'help' // 设置光标
}
})
term.open(document.getElementById('app'))
function runFakeTerminal () {
if (term._initialized) {
return
}
term._initialized = true
term.prompt = () => {
term.write('\r\n$ ')
}
term.writeln('Welcome to xterm.js')
term.writeln('This is a local terminal emulation, without a real terminal in the back-end.')
term.writeln('Type some keys and commands to play around.')
term.writeln('')
term.prompt()
term.onKey(e => {
console.log(e)
const ev = e.domEvent
const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
if (ev.keyCode === 13) {
term.prompt()
} else if (ev.keyCode === 8) {
// Do not delete the prompt
if (term._core.buffer.x > 2) {
term.write('\b \b')
}
} else if (printable) {
term.write(e.key)
}
})
}
runFakeTerminal()
}
}
</script>
<style lang="scss">
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/f25cfe83ebf2d93ba6905d87ceceec48.png)
如果觉得文章不错,可以给小编发个红包给予鼓励.