10 Star 207 Fork 60

beifengtz/vue-web-terminal

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

中文版 | English

vue-web-terminal

Downloads Version

一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件,支持表格、json、代码等多种消息格式,支持自定义消息样式、命令行库、键入搜索提示等,模拟原生终端窗口支持 ← → 光标切换和 ↑ ↓ 历史命令切换。

功能支持

  • 支持消息格式:文本、表格、json、代码/多行文本、html、ansi
  • 支持内容实时回显
  • 支持用户问答输入
  • 支持Highlight.jsCodemirror.js代码高亮
  • 支持 ← → 键光标切换
  • 支持 ↑ ↓ 键历史命令切换
  • 支持Fullscreen全屏显示
  • 支持窗口拖拽
  • 支持多行文本编辑
  • 支持自定义命令库和命令搜索提示,Tab键快捷填充
  • 支持用户输入过滤
  • 提供方便的API方法:执行命令、推送消息、模拟拖拽、获取DOM信息、全屏等
  • 提供多个Slots插槽支持自定义样式

vue-web-terminal

一句话描述:

它并不具备执行某个具体命令的能力,这个能力需要开发者自己去实现,它负责的事情是在网页上以终端界面的形式从用户那拿到想要执行的命令,然后交给开发者去实现,执行完之后再交给它展示给用户。

在线体验

在线Demo:https://tzfun.github.io/vue-web-terminal/

Edit Vue Template

快速上手

npm安装vue-web-terminal,2.x.x版本对应vue2,3.x.x版本对应vue3,建议下载对应大版本的最新版。

#  install for vue2
npm install vue-web-terminal@2.xx --save

#  install for vue3
npm install vue-web-terminal@3.xx --save 

main.js中载入 Terminal 插件

import Terminal from 'vue-web-terminal'
//  3.1.8 以后以及 2.1.12 以后版本需要引入此样式,之前版本无需引入主题样式
import 'vue-web-terminal/lib/theme/dark.css'

// for vue2
Vue.use(Terminal)

// for vue3
const app = createApp(App).use(Terminal)

使用示例


<template>
  <div id="app">
    <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
  </div>
</template>

<script>
  import Terminal from "vue-web-terminal"
  //  3.1.8 以后以及 2.1.12 以后版本需要引入此样式,之前版本无需引入主题样式
  import 'vue-web-terminal/lib/theme/dark.css'

  export default {
    name: 'App',
    components: {Terminal},
    methods: {
      onExecCmd(key, command, success, failed) {
        if (key === 'fail') {
          failed('Something wrong!!!')
        } else {
          let allClass = ['success', 'error', 'system', 'info', 'warning'];

          let clazz = allClass[Math.floor(Math.random() * allClass.length)];
          success({
            type: 'normal',
            class: clazz,
            tag: '成功',
            content: command
          })
        }
      }
    }
  }
</script>

<style>
  body, html, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
</style>

插件文档

主题

2.1.133.2.0版本开始,插件内置有两个主题:darklignt

//  引入黑色主题
import 'vue-web-terminal/lib/theme/dark.css'

//  引入白色主题
import 'vue-web-terminal/lib/theme/light.css'

如果你需要自定义主题,可以自定义相应的css变量。

注:2.1.123.1.8版本以前(包含)不支持主题功能,无需引入css文件

Attributes

terminal标签支持的属性参数表

参数 说明 类型 默认值
name Terminal实例名称,同一页面的name必须唯一,API中使用也需用到此值 string terminal
context 上下文内容 string /vue-web-terminal
context-suffix 上下文后缀符号 string >
title 窗口头部显示的标题 string vue-web-terminal
show-header 是否显示窗口头部,此开关会影响拖拽功能,只有显示头部才能使用默认提供的拖拽功能 boolean true
init-log Terminal初始化时显示的日志,是由消息对象组成的数组,设为null则不显示 array
warn-log-count-limit 当前Terminal显示的日志条数超出此限制会发出警告,设一个<= 0的值将不发出警告 number 200
auto-help 是否打开命令行自动搜索提示功能 boolean true
enable-example-hint 是否显示右上角命令样例提示,前提是开启了auto-help boolean true
command-store 自定义的命令库,搜索提示功能会扫描此库,见命令定义格式 array 内置命令
command-store-sort 命令行库排序,自定义命令库的显示排序规则 function function(a,b)
input-filter 自定义输入过滤,返回值为过滤后的字符串,必须是纯文本,不能带html标签 function function(当前输入字符char, 输入框内字符串value, input事件event)
drag-conf 拖拽窗口配置项,如果不配置此项宽高将会100%填充父元素,窗口宽高等同于父元素宽高 object 拖拽功能
command-formatter 命令显示格式化函数,一般用于输入命令高亮显示,传入当前命令返回新的命令,支持html。如果不设置将使用内部定义的高亮样式 function function(cmd)
tab-key-handler 用户键入Tab键时的逻辑处理方法,可配合helpCmd这个slot使用 function function(event)
search-handler 用户自定义命令搜索提示实现,callback需接收一个命令对象,具体格式见命令定义格式,可配合helpCmd这个slot使用 function function(commandStore, key, callback)
scroll-mode 滚动条模式 string smooth
push-message-before 在推送消息显示之前触发的钩子函数 function function(message, name)
log-size-limit 限制显示日志的最大条数 number 200

下面是已移除属性

  • show-log-time: 2.0.143.0.13版本之后移除
  • warn-log-byte-limit: 2.1.03.1.0版本之后移除
  • warn-log-limit-enable: 2.1.13.1.1版本之后移除
  • init-log-delay: 2.1.13.1.1版本之后移除

Events

terminal标签支持的事件表

事件名称 说明 回调参数
exec-cmd 执行自定义命令时触发。successfailed为回调函数,必须调用两个回调其中之一才会回显!其中success回调参数含义见下方说明,failed回调参数为一个string (cmdKey, command, success, failed, name)
before-exec-cmd 用户敲下回车之后执行命令之前触发 (cmdKey, command, name)
on-keydown 当获取命令输入光标焦点时,按下任意键触发 (event, name)
on-click 用户点击按钮时触发,参数key为按钮唯一识别,已有按钮:close, minScreen, fullScreen, title, pin (key, name)
init-before 生命周期函数,插件初始化之前触发 (name)
init-complete 生命周期函数,插件初始化完成之后触发 (name)
on-active 窗口活跃时触发 (name)
on-inactive 窗口由活跃状态变为不活跃状态时触发 (name)

特别说明:exec-cmd的success回调参数支持多种数据类型,不同数据类型执行逻辑也会不同:

  • 不传任何参数,立即结束本次执行
  • 传入一个消息对象,将会向记录中追加一条消息,并立即结束本次执行
  • 传入一个消息对象数组,将会向记录中追加多条消息,并立即结束本次执行
  • 传入一个TerminalFlash对象,将会进入实时回显处理逻辑,本次执行并不会结束,直到调用finish()
  • 传入一个TerminalAsk对象,将会进入用户询问输入处理逻辑,本次执行并不会结束,直到调用finish()

注意:

2.1.73.1.3版本开始,事件的驼峰命名被移除,如果你的版本是在这之后,请使用中划线命名,比如@exec-cmd="onExecCmd" issue#41

Slots

Terminal支持以下自定义插槽,此功能在2.0.113.0.8版本及之后支持。

插槽名称 参数 说明
header / 自定义header样式,仍然会保留拖拽区域
helpBox { showHeader, item } 自定义命令搜索结果提示框,item为搜索结果
normal { message } 自定义normal类型消息
json { message } 自定义json类型消息
table { message } 自定义table类型消息
code { message } 自定义code类型消息
html { message } 自定义html类型消息
flash { content } 自定义实时回显样式
helpCmd { item } 自定义命令搜索提示样式
textEditor { data } 自定义文本编辑器样式,更多关于文本编辑器的使用方法见文本编辑器

example:


<terminal :name="name" @exec-cmd="onExecCmd">
<template #header>
  This is my custom header
</template>

<template #json="data">
  {{ data.message }}
</template>

<template #helpBox="{showHeader, item}">
  {{ item }}
</template>

<template #textEditor="{data}">
        <textarea name="editor" class="t-text-editor" v-model="data.value"
                  @focus="data.onFocus" @blur="data.onBlur"></textarea>
  <div class="t-text-editor-floor" align="center">
    <button class="t-text-editor-floor-btn" @click="_textEditorClose(false)">Cancel</button>
    <button class="t-text-editor-floor-btn" @click="_textEditorClose(true)">Save & Close(Ctrl + S)</button>
  </div>
</template>
</terminal>

API

本插件提供了一些 API 可以使用 Js 主动向插件发起事件请求。你有两种方式调用API:

1). 获取全局API对象

注意:全局API接口调用都需要用到Terminal的name

旧版本兼容方式(不推荐)

import Terminal from "vue-web-terminal"

//  调用API
Terminal.$api.pushMessage('my-terminal', 'hello world!')

新版本方式(推荐)

import {api as TerminalApi} from "vue-web-terminal"

//  调用API
TerminalApi.pushMessage('my-terminal', 'hello world!')

2). 获取实例调用API

这种方法调用所有的API接口都不需要传入name

//  vue template code
<terminal ref='myTerminal'></terminal>

//  ......

//  vue js code
this.$refs.myTerminal.pushMessage('hello world!')

已移除api

  • getPosition: 2.0.143.0.13版本之后移除,请使用elementInfo()
  • updateContext: 2.1.33.1.3版本之后移除,直接修改绑定的 context 变量即可修改上下文

pushMessage()

在线Demo演示

向Terminal推送一条或多条消息

//  推送一条消息
let message = {
    class: 'warning',
    content: 'This is a wanning message.'
}
TerminalApi.pushMessage('my-terminal', message)

//  推送多条消息
let messages = [
    {content: "message 1"},
    {content: "message 2"},
    {content: "message 3"}
]
TerminalApi.pushMessage('my-terminal', messages)

appendMessage()

3.2.0版本新增

向最后一条消息追加内容。仅当最后一条消息存在,且其 type 为 normal、ansi、code、html时才会追加,否则 push 一条新消息。

TerminalApi.appendMessage('my-terminal', "this is append content")

fullscreen()

使当前terminal进入或退出全屏

TerminalApi.fullscreen('my-terminal')

isFullscreen()

判断当前是否处于全屏状态

//  true or false
let fullscreen = TerminalApi.isFullscreen('my-terminal')

dragging()

当开启拖拽功能时可以使用下面这种方式来改变窗口位置,其中参数x 是terminal左边框到浏览器可视范围左边框的距离,y是terminal上边框到浏览器可视范围上边框的距离,单位px。

TerminalApi.dragging('my-terminal', {
    x: 100,
    y: 200
})

execute()

可以使用 API 向Terminal执行一个命令,执行过程会回显在Terminal窗口中,这是一种用 JS 模拟用户执行命令的方式

TerminalApi.execute('my-terminal', 'help :local')

focus()

获取Terminal输入焦点,插件内有三处输入点:

  • 命令行输入,focus方法传入true则表示强制获取输入焦点,否则只会获得光标焦点并使terminal触发on-active事件。
  • Ask用户输入焦点,当处于ask模式下获取相应的输入焦点
  • 文本编辑器焦点,当处于文本编辑模式下获取相应的输入框焦点,如果你用了slot来自定义实现,需要在slot中提供focus事件的入口
TerminalApi.focus('my-terminal', true)

elementInfo()

在线Demo演示

获取Terminal窗口DOM信息,你可以通过此 API 获取Terminal的窗口宽度高度、显示内容的宽度高度、所在位置、单字符宽度等,单位为px

注意:如果你的窗口已创建但未显示在页面(比如用了v-show控制显示),可能会出现部分信息失效的问题。

let info = TerminalApi.elementInfo('my-terminal')

info数据结构如下:

{
  "pos": {
    "x": 100,
    "y": 100
  },
  "screenWidth": 700,
  "screenHeight": 500,
  "clientWidth": 690,
  "clientHeight": 490,
  "charWidth": {
    "en": 7.2,
    "cn": 14
  }
}

下面这张图清晰地描述了这些值的含义:

ele-info.png

textEditorOpen()

此API调用后将会打开文本编辑器,使用示例:

TerminalApi.textEditorOpen('my-terminal', {
    content: 'This is the preset content',
    onClose: (value, options) => {
        console.log('Final content: ', value, "options:", options)
    }
})

content是打开编辑器时预置的内容,如果你不想预置任何内容可以不填此参数,当用户点击Close或主动调用textEditorClose() 方法时会触发onClose回调,参数value为当前编辑器内的文本内容和传入参数选项。

更多关于文本编辑器的使用方法见文本编辑器

textEditorClose()

此方法用于关闭当前打开的文本编辑器,调用后会触发打开时的onClose回调。

TerminalApi.textEditorClose('my-terminal', true)

TerminalApi.textEditorClose('my-terminal', false)

消息对象

本插件定义了消息对象,任何一个需要被以记录的形式显示在Terminal上的信息都是一个消息对象,exec-cmd事件的success() 回调和pushMessageapi都会用到它。

属性 说明 类型 可选值
content 必填,消息内容,不同消息格式的内容格式不一样,具体规则见下文 string、json、object、array /
type 消息格式类型,默认值为normal string normal、json、code、table、html、ansi
class 消息级别,仅类型为normal有效 string success、error、system、info、warning
tag 标签,仅类型为normal有效 string /

normal 普通文本

content为字符串格式,支持html标签。它支持slot重写样式,详情见Slots

此处支持的html标签与html类型的消息区别在于:normal消息的父元素是行内元素,html的父元素是块级元素

{
  "type": "normal",
  "content": "This is a text message",
  "class": "success",
  "tag": "Tag success"
}

json

在线Demo演示

json类型的消息会被显示为json编辑窗口,type为json,content需传一个json对象。

{
  "type": "json",
  "content": {
    "key": "value",
    "num": 1
  }
}

code

在线Demo演示

code类型消息可以更友好的显示代码和多行文本,type为code,content类型为字符串。它支持highlight和codemirror的高亮显示。

{
  "type": "json",
  "content": "import Terminal from 'vue-web-terminal'\n\nVue.use(Terminal)"
}

highlight.js 代码高亮

code类型消息支持 highlight.js 高亮显示。

首先你需要配置 Highlight.js ,在main.js入口安装,详细配置见https://www.npmjs.com/package/highlight.js

import Terminal from 'vue-web-terminal'
import hljs from 'highlight.js'
import java from 'highlight.js/lib/languages/java'
import vuePlugin from "@highlightjs/vue-plugin"
import 'highlight.js/styles/tomorrow-night-bright.css'

hljs.registerLanguage('java', java)
Vue.use(vuePlugin)
Vue.use(Terminal, {highlight: true})

vue2版本依赖推荐,vue3使用最新的版本即可

{
  "@highlightjs/vue-plugin": "^1.0.2",
  "highlight.js": "^10.7.3"
}

codemirror 代码高亮

code类型消息也支持 codemirror 高亮显示,详细配置见https://www.npmjs.com/package/vue-codemirror

同样只需要在main.js入口安装即可,vue2版本推荐:"vue-codemirror": "^4.0.6"

import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/closebrackets.js'

Vue.use(VueCodemirror)
Vue.use(Terminal, {
    codemirror: {
        tabSize: 4,
        mode: 'text/x-java',
        theme: "darcula",
        lineNumbers: true,
        line: true,
        smartIndent: true
    }
})

table

在线Demo演示

type为table时content为表格配置,head为表头,rows为每行的数据,支持html标签

{
  "type": "table",
  "content": {
    "head": [
      "title1",
      "title2",
      "title3",
      "title4"
    ],
    "rows": [
      [
        "name1",
        "hello world",
        "this is a test1",
        "xxxxxxxx"
      ],
      [
        "name2",
        "hello world",
        "this is a test2 test2",
        "xxxxxxxx"
      ]
    ]
  }
}

html

在线Demo演示

type为html时可自定义内容格式,content为html标签构成

function execCmd(key, command, success) {
    // ...
    success({
        type: 'html',
        content: `
          <ul class="custom-content">
            <li class="t-dir">dir 1</li>
            <li class="t-dir">dir 2</li>
            <li class="t-dir">dir 3</li>
            <li class="t-file">file 1</li>
            <li class="t-file">file 2</li>
            <li class="t-file">file 3</li>
          </ul>
          `
    })
    // ...
}

ansi

在线Demo演示

type为ansi时可以显示ANSI控制码样式,目前仅支持着色控制,包含xterm-256color色系,其余控制码会被过滤

function execCmd(key, command, success) {
    // ...
    success({
        type: 'ansi',
        content: '\x1B[1;34mThis are some blue text.\x1B[0m\n\x1B[30;43mThis is a line of text with a background color.\x1B[0m\n\x1B[92;5mThis is blink text.\x1B[0m'
    })
    // ...
}

命令定义

用于help和命令帮助搜索,这里的命令定义仅作为显示用,没有具体的执行逻辑,命令的执行逻辑你应该在Eventsexec-cmd 事件中实现。

如果开启了命令帮助搜索功能,在实例化Terminal之前需要传入自定义命令库,传入的命令库为命令数组,以下是命令格式定义规则:

参数 说明 类型
key 命令关键字,必填 string
title 显示标题 string
group 分组,可自定义,内置的help命令可以按照此字段进行筛选 string
usage 使用方法 string
description 详细描述 string
example 使用示例,见命令示例格式 array

命令示例格式

示例格式比较简单,它是一个json数组,json对象的des为描述,cmd为具体的命令,json格式如下:

[
  {
    "des": "获取所有任务信息",
    "cmd": "task -o pack"
  },
  {
    "des": "获取任务进度",
    "cmd": "task -o query"
  }
]

命令Help

在线Demo演示

插件内置了help命令可以方便使用者查看命令的使用方法,前提是这些命令已经提前定义 好了,通过help命令可以查看命令的key、分组、解释样例信息。


# 显示全部命令信息
help

# 模糊搜索命令,搜索build前缀的命令
help build*

# 模糊搜索名,搜索带有event的命令
help *event*

# 按分组搜索,搜索关键词需要以":"开头,搜索分组为server的所有命令
help :server

内置命令

Terminal默认内置有以下命令,且不可替代

[
  {
    "key": "help",
    "title": "Help",
    "group": "local",
    "usage": "help [pattern]",
    "description": "Show command document.",
    "example": [
      {
        "des": "Get help documentation for exact match commands.",
        "cmd": "help open"
      },
      {
        "des": "Get help documentation for fuzzy matching commands.",
        "cmd": "help *e*"
      },
      {
        "des": "Get help documentation for specified group, match key must start with ':'.",
        "cmd": "help :groupA"
      }
    ]
  },
  {
    "key": "clear",
    "title": "Clear logs",
    "group": "local",
    "usage": "clear [history]",
    "description": "Clear screen or history.",
    "example": [
      {
        "cmd": "clear",
        "des": "Clear all records on the current screen."
      },
      {
        "cmd": "clear history",
        "des": "Clear command history."
      }
    ]
  },
  {
    "key": "open",
    "title": "Open page",
    "group": "local",
    "usage": "open <url>",
    "description": "Open a specified page.",
    "example": [
      {
        "cmd": "open blog.beifengtz.com"
      }
    ]
  }
]

高级功能

拖拽功能

开启拖拽功能需要将show-header设置为true并配置drag-conf,你可以通过dragConf的widthheight 来配置窗口大小,可以通过init控制窗口初始化位置,下面是一个简单的示例。


<terminal name="my-terminal"
          show-header
          :drag-conf="{width: 700, height: 500, init:{ x: 50, y: 50 }}">
</terminal>

dragConf完整配置结构如下:

参数 说明 类型
width 拖拽窗口宽度,可以是数字(单位px)也可以是百分比(相对于浏览器窗口) number/string
height 拖拽窗口高度,同宽度 number/string
zIndex 窗口层级,此值可以修改并被terminal监听,可用于多窗口层级的控制,默认100 number
init 窗口初始化位置,如果不填则默认位置在浏览器窗口中央,其中x和y的单位为px, {"x": 700, "y": 500} object
pinned 固定窗口,固定后将无法拖拽,当点击按钮修改此值时会在on-click事件中触发 pin boolean

dragging.gif

除了鼠标控制之外你还可以调用API移动窗口位置

拖拽缩放窗口

当配置了drag-conf,窗口讲开启拖拽缩放功能,缩放触控区域在窗口的四个角上。

实时回显

在线Demo演示

Terminal默认的消息都是以追加的模式显示,当你只需要显示执行的过程,执行结束后这些内容不想存在于记录中的时候,实时回显是不错的选择。 例如gradlenpm下载依赖包时,下载进度条动画展示的过程。

Eventsexec-cmd事件回调中,success回调函数支持传入实时回显的处理对象。

通过new TerminalFlash()创建一个flash对象,传入success回调中,flash对象提供两个方法:

  • flush(string): 更新当前显示的内容
  • finish(): 结束执行
import {Flash as TerminalFlash} from 'vue-web-terminal'

let flash = new TerminalFlash()
success(flash)

let count = 0
let flashInterval = setInterval(() => {
    flash.flush(`This is flash content: ${count}`)

    if (++count >= 20) {
        clearInterval(flashInterval)
        flash.finish()
    }
}, 200)

旧版本的Terminal.$Flash调用方式仍然兼容,但不推荐

用户询问输入

在线Demo演示

当需要向用户询问时,使用此功能可以获取到用户输入的内容,例如登录时需要用户输入用户名密码的场景。

Eventsexec-cmd事件回调中,success回调函数支持传入用户输入的处理对象。

通过new TerminalAsk()创建一个新的ask对象,传入success回调中,ask对象提供两个方法:

  • ask(options): 发起一个用户询问输入,options是一个对象,其属性解释如下(*号表示必填):
    • question: string,询问的问题,或者可以理解为用户输入的前缀字串
    • callback: function,用户键入回车时的回调,参数值为用户输入的内容
    • autoReview: bool,用户键入回车时是否自动追加当前的显示内容
    • isPassword: bool,是否是密码输入
  • finish(): 结束执行
import {Ask as TerminalAsk} from 'vue-web-terminal'

let asker = new TerminalAsk()
success(asker)

asker.ask({
    question: 'Please input github username: ',
    autoReview: true,
    callback: value => {
        console.log(value)
        asker.ask({
            question: 'Please input github password: ',
            autoReview: true,
            isPassword: true,
            callback: () => {
                //    do something
                asker.finish()
            }
        })
    }
})

文本编辑器

在线Demo演示

使用API

当要对多行文本编辑时可以使用API:textEditorOpen()textEditorClose(),具体介绍详情请见API部分,下面是一个简单的示例:

TerminalApi.textEditorOpen('my-terminal', {
    content: 'Please edit this file',
    onClose: (value, options) => {
        console.log("用户编辑完成,文本结果:", value, "options:", options)
    }
})

Slot自定义样式

如果你对默认样式不太喜欢,可以使用Slot自定义编辑器的样式(比如改成 Codemirror或者VS Code ?),参数为data,其中data有三个属性是你需要关心的:

  • value:编辑的文本内容,你需要在你实现的编辑器中用v-model绑定它
  • onFoucs:获取焦点事件,你需要在你实现的编辑器中绑定@focus事件
  • onBlur:失去焦点事件,你需要在你实现的编辑器中绑定@blur事件

自定义快捷键

插件提供了一个onKeydown事件,此事件是你控制活跃状态 下Terminal快捷键最好的方法,这里以文本编辑器为例,设定用户按快捷键Ctrl + S就表示完成编辑并保存

<template>
  <terminal :name="name" @exec-cmd="onExecCmd" @on-keydown="onKeydown">
    <template #textEditor="{ data }">
      <textarea name="editor"
                class="t-text-editor"
                v-model="data.value"
                @focus="data.onFocus"
                @blur="data.onBlur"></textarea>

      <div class="t-text-editor-floor" align="center">
        <button class="t-text-editor-floor-btn" @click="_textEditorClose(false)">Cancel</button>
        <button class="t-text-editor-floor-btn" @click="_textEditorClose(true)">Save & Close</button>
      </div>

    </template>
  </terminal>
</template>

<script>
import {Terminal, api as TerminalApi} from "vue-web-terminal";
//  3.1.8 以后以及 2.1.12 以后版本需要引入此样式,之前版本无需引入主题样式
import 'vue-web-terminal/lib/theme/dark.css'

export default {
  name: "TerminalOldDemo",
  components: {Terminal},
  data() {
    return {
      name: "my-terminal",
      enableTextEditor: false
    }
  },
  method: {
    onExecCmd(key, command, success, failed, name) {
      if (key === 'edit') {
        TerminalApi.textEditorOpen(this.name, {
          content: 'Please edit this file',
          onClose: (value) => {
            this.enableTextEditor = false
            success({
              type: "code",
              content: value
            })
          }
        })
        this.enableTextEditor = true
      }
    },
    onKeydown(event) {
      if (this.enableTextEditor && event.key === 's' && event.ctrlKey) {
        this._textEditorClose(true)
        event.preventDefault()
      }
    },
    _textEditorClose(option) {
      TerminalApi.textEditorClose(this.name, option)
    }
  }
}
</script>

联系

我是一名后端Coder,对前端仅会一点皮毛,因为个人兴趣开发了此插件,业余玩家请多指教。

如果对代码优化或功能有好的想法并乐意贡献代码欢迎提交PR ,对插件使用存在疑问或发现bug请提交issue

联系

📮 beifengtz@qq.com

beifeng-tz (添加请备注vue-web-terminal)

交流群

有任何疑问或遇到难题都可在交流群中提出,加我微信进群(见上方联系方式)

捐赠

本插件完全开源免费,创作不易,如果你觉得不错可以捐赠支持本项目。

感谢大佬的捐赠:

License

Apache License 2.0

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

一个基于Vue制作的轻量且功能强大的网页Terminal插件。支持多种数据显示格式,支持Flash内容实时回显和用户输入,多个slot可自定义,提供Js Api。 展开 收起
JavaScript 等 6 种语言
Apache-2.0
取消

发行版 (43)

全部
7小时前

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/tzfun/vue-web-terminal.git
git@gitee.com:tzfun/vue-web-terminal.git
tzfun
vue-web-terminal
vue-web-terminal
2.1.13

搜索帮助

0d507c66 1850385 C8b1a773 1850385