xterm.js的深刻學習

demo

<template>
  <div id="app" class="app-box">Hello</div>
</template>

<script>
  import {
    Terminal
  } from 'xterm'
  import 'xterm/dist/xterm.css'
  export default {
    name: 'app',
    mounted() {
      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'))

      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)`)

      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();
    }

  }

</script>

<style lang="scss">
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
</style>

　　參考資料:

- [xterm的配置](https://github.com/xtermjs/xterm.js/blob/3.12.0/typings/xterm.d.ts#L16)