Vue终端仿真器– vue-command

Vue终端仿真器– vue-command
插件名称 vue-command
发布时间 2020年6月28日
插件作者 ndabAP

vue-command是一个简单且可自定义的终端仿真器,支持自动完成,异步命令,搜索历史记录等。

目前,它带有2个主题(浅色和深色),您可以创建自己的主题,如在中所见vue-command.css

变更日志:

v23.0.1(12/10/2020)

  • Bug修复

v23.0.0(09/01/2020)

  • 新增键盘高亮

v22.0.0(08/22/2020)

  • 在createStdout中添加了useInnerText选项
  • 错误修正

v21.0.0(2020年8月14日)

  • 更新资料

v18.0.0(08/13/2020)

  • 添加缺少的贡献者提示

v17.0.0(08/11/2020)

  • Bug修复

v15.0.1(07/31/2020)

  • Bug修复

v15.0.0(07/13/2020)

  • chore :弄乱后重设

v14.0.0(06/27/2020)

  • 使用常规提交
  • 对事件监听器使用数组
  • 选择加入事件监听器
  • 选择键盘事件
  • 选择加入终端事件监听器
  • 对事件监听器使用数组
  • 历史事件侦听器此绑定

安装和下载:

# NPM
$ npm install vue-command --save

如何使用它:

安装并导入vue命令。

import VueCommand from './VueCommand'
import 'vue-command/dist/vue-command.css'

使用组件。

<vue-command
  :commands="commands"
  show-help/>

在包含键值对的对象中定义命令,如下所示:

export default {
  components: {
    VueCommand
  },
  data: () => ({
    commands: {
      pokedex: ({ color, _ }) => {
        if (color && _[1] === 'pikachu') return 'yellow'
        return `Usage: pokedex pokemon [option]<br><br>
          Example: pokedex pikachu --color
        `
      },
      help: () => (`Usage: pokedex pokemon [option]<br><br>
        Example: pokedex pikachu --color
      `)
    }
  })
}

定制终端仿真器的所有可能 props 。

commands: {
  type: Object,
  required: true
},
helpTimeout: {
  type: Number,
  default: 4000
},
hideBar: {
  type: Boolean,
  default: false
},
hidePrompt: {
  type: Boolean,
  default: false
},
helpText: {
  type: String,
  default: 'Type help'
},
intro: {
  type: String,
  default: 'Fasten your seatbelts!'
},
keepPrompt: {
  type: Boolean,
  default: false
},
prompt: {
  type: String,
  default: '~neil@moon:#'
},
showHelp: {
  type: Boolean,
  default: false
},
showIntro: {
  type: Boolean,
  default: false
},
title: {
  type: String,
  default: 'neil@moon: ~'
},
whiteTheme: {
  type: Boolean,
  default: false
},
yargsOptions: {
  type: Object,
  default: () => ({})
}

活动。

  • @input:发出当前输入
  • @execute:发出整个执行命令
  • @exected:命令执行后发出