Vue终端模拟器（vue-command）

 website 下载

介绍

vue-command是一个简单且可自定义的终端仿真器，支持自动完成，异步命令，搜索历史记录等。目前，它带有2个主题（浅色和深色），您可以创建自己的主题，如在中所见vue-command.css。

使用方法

导入vue-command。

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
      `)
    }
  })
}

所有配置项。

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: () => ({})
}