柚子快报邀请码778899分享：xterm.js的深入学习
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)`)
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();
5、vue中使用demo如下：
如果觉得文章不错,可以给小编发个红包给予鼓励.
柚子快报邀请码778899分享：xterm.js的深入学习
发表评论