使用xterm報錯：Error: Terminal requires a parent element、及删除時報錯：xterm.js: Parsing error 的問題

一、報錯：Error: Terminal requires a parent element.

　　按官網例子，我最初是在 created() 裡加載的方法

// html
<div id="terminal"></div>

// js
import { Terminal } from "xterm";
import "xterm/css/xterm.css";
export default {
  created () {   // 不要在 created 裡寫哦，因為需要使用 dom
    var term = new Terminal();
    term.open(document.getElementById('terminal'));
    term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
    term.onData((val) => {
      term.write(val);
    }); 
  }
}      

　　報錯：

Error: Terminal requires a parent element.
    at t.open (xterm.js?ba0f:1)
    at e.open (xterm.js?ba0f:1)      

　　解決原因也很簡單，改成 mounted() 即可，因為需要使用到 dom，是以必須等 dom 結構準備好之後才能初始化。

二、指令删除時報錯：xterm.js: Parsing error

1、問題背景

　　當我使用 xterm 示例的時候，無法删除寫錯的字元，一删除就報錯，報錯資訊如下：

　　xterm.js?ba0f:1 xterm.js: Parsing error:  {position: 0, code: 127, currentState: 0, collect: 0, params: e, …}

2、解決方案：

　　檢視 api 文檔發現有個 onKey ，其傳回參數是個 Event（Object），那麼通過這個 event 我們就可以做很多事情

　　代碼處理如下：通過判斷 keyCode 等就可以知道删除時的情況

// 添加事件監聽器，支援輸入方法
term.onKey(e => {
  const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey
  if (e.domEvent.keyCode === 13) {
    term.prompt()
  } else if (e.domEvent.keyCode === 8) { // back 删除的情況
    if (term._core.buffer.x > 2) {
      term.write('\b \b')
    }
  } else if (printable) {
    term.write(e.key)
  }
  console.log(1,'print', e.key)
})      

　　但是 onKey 不支援粘貼，是以使用 onData() 去支援粘貼

term.onData(key => {  // 粘貼的情況
  if(key.length > 1) term.write(key)
})