vuejs 前端ui_终端UI模拟器VueJS组件

cuk5340

墨衍会员 · AI 创作全网分发码龄12年

关注

翻译最新推荐文章于 2026-08-10 15:49:51 发布 939 阅读 AI 写同款· GEO 优化 ›

vuejs 前端ui

Vue.js终端UI模拟器 (Vuejs terminal UI emulator)

Vuejs component for displaying UI element that acts as console terminal. Actual terminal logic code forked from Ptty.

Vuejs组件，用于显示充当控制台终端的UI元素。从Ptty分叉的实际终端逻辑代码。

View demo 查看演示 Download Source 下载源

安装 (Install)

npm i vue-terminal-ui --save

用法 (Usage)

// import plugin
import VueTerminal from 'vue-terminal-ui'

// add to components section
components{
    VueTerminal
},
// add method to call on command is typed
 methods: {
    onCliCommand(data, resolve, reject){
      // typed command is available in data.text
      // don't forget to resolve or reject the Promise
      setTimeout(()=> {
        resolve('')
      }, 300)
    }
  },
// use in template
   <VueTerminal :intro="intro"
                console-sign="$"
                allow-arbitrary
                height="500px"
                @command="onCliCommand"></VueTerminal>

属性和事件 (Properties & Events)

props

道具

intro (String) - intro text when terminal starts;
intro (String)-终端启动时的介绍文字；
console-sign(String) - starting symbol for each command line, eg. my-folder/master $ or just >>;
console-sign (字符串)-每个命令行的起始符号，例如 my-folder/master $或仅>> ;
allow-arbitrary(Boolean) - allow type any command in addition to basic ones, then @command will be called;
allow-arbitrary (Boolean)-允许输入除基本命令以外的任何命令，然后将调用@command ；
height(String) - UI block height, eg. 500px;
height (字符串)-UI块的高度，例如 500px ;