vue + xterm 前端终端terminal

引入

javascript 复制代码
import {Terminal} from "xterm";
import {FitAddon} from "xterm-addon-fit";
import "xterm/css/xterm.css";

html

javascript 复制代码
<div id="terminal"></div>

vue

javascript 复制代码
onMounted(() => {
  nextTick(() => {
    initTerm();
  })
})

const initTerm = async () => {
  let termContainer = document.getElementById("terminal");
  term = new Terminal({
    lineHeight: 1.3,
    fontSize: 15,
    fontFamily:
      "WenQuanYi Micro Hei, Monaco, Menlo, Consolas, 'Courier New', monospace",
    theme: {
      background: '#181d28',
    },
    unicodeVersion: 12,
    convertEol: true,
    // 光标闪烁
    cursorBlink: true,
    cursorStyle: 'underline',
    scrollback: 100,
    tabStopWidth: 4,
  });

  term.open(termContainer)
};

write

命令 含义
term.write('\n') 换行
term.write('\r'+内容) 从头替换当前行内容
write('\x1b[2K\r') 删除当前整行

调整光标位置

javascript 复制代码
term._core.buffer.x = 0;
相关推荐
祝余呀11 分钟前
HTML初学者第三天
前端·html
就爱瞎逛27 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81630 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者44 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app