vue + xterm 前端终端terminal

news/2024/9/23 6:33:40/

引入

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;

http://www.ppmy.cn/news/1501319.html

相关文章

c++中的哈希查找(Hash Search)和B树查找(B-Tree Search)

前言 hello大家好啊&#xff0c;我是文宇&#xff0c;不是文字&#xff0c;是文宇哦&#xff0c;这期也是关于查找算法的。 哈希查找&#xff08;Hash Search&#xff09; 哈希查找&#xff08;Hash Search&#xff09;是一种基于哈希表的查找算法&#xff0c;它可以在常数时…

微信小程序之调查问卷

一、设计思路 1、界面 调查问卷又称调查表&#xff0c;是以问题的形式系统地记载调查内容的一种形式。微信小程序制作的调查问卷&#xff0c;可以在短时间内快速收集反馈信息。具体效果如下所示&#xff1a; 2、思路 此调查问卷采用服务器客户端的方式进行设计&#xff0c;服…

vue3 快速入门 (五) : Flex布局

1. 如何变成Flex布局 变成Flex容器&#xff0c;只需在容器布局的节点的CSS中&#xff0c;增加display : flex .mylayout {/* 省略了其他代码 */display: flex; }2. flex direction : 方向 row : 以行排列 row-reverse &#xff1a; 以行反向排列 column &#xff1a;以列排列…

设计模式实战:电子邮件客户端的设计与实现

问题描述 设计一个电子邮件客户端,用户可以发送、接收和查看电子邮件。系统需要支持邮件通知、邮件内容的增强(如加密、签名等),并能够处理各种邮件请求(如垃圾邮件过滤、病毒扫描等)。 设计分析 观察者模式 观察者模式定义了对象间的一对多依赖关系,当一个对象的状…

HTML开发笔记:3.图形化开发软件与模版网站

一、Google Web Designer 下载网址&#xff1a;webdesigner.withgoogle.com&#xff08;得挂梯子&#xff09; 可以编辑文字 可以插入图片&#xff0c;快捷键是ctrlshiftI 右侧“大纲”属性中可以调节大小 可以点击右上角在浏览器中预览效果&#xff1a; 二、模版网站 https://…

【环境变量】安装了一个软件,如何配置环境变量?

配置环境变量为啥&#xff1f; 方便地在任何文件夹下调用某一指定目录下的文件。 配置步骤 以jdk17为例。 1.打开环境变量配置页面 2.新建一个变量&#xff0c;变量名为JAVA_HOME&#xff0c;内容为jdk的path路径 3.打开path变量&#xff0c;新建一个%JAVA_HOME%\bin&#x…

PP-Human行为识别(RTSP协议视频流实时检测)

基于PaddleDetection本地实现PP-Human行为识别模块&#xff08;RTSP协议视频流实时检测&#xff09; 项目介绍环境准备1. Anaconda 创建环境2. 获取 PaddleDetection3. 获取 [MediaMTX](https://github.com/bluenviron/mediamtx/releases/tag/v1.8.4)4. FFmpeg 获取5. VLC 获取…

古籍双层PDF制作教程:保姆级古籍数字化教程

在智慧古籍数字化项目中&#xff0c;很多图书馆要求将古籍导出为双层PDF&#xff0c;并且确保输出双层PDF底层文本与上层图片偏移量控制在1毫米以内。那么本教程带你使用古籍数字化平台&#xff0c;3分钟把一个古籍书籍转化为双侧PDF。 第1步&#xff1a;上传古籍 点批量上传…