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