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

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

 

如果觉得文章不错,可以给小编发个红包给予鼓励.