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 <br>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()
  <br><br><br>

　　如果是旧版本的，是这样的

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如下：

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