vue.js适配各个终端_完整的Vue.js终端模拟器

vue.js适配各个终端

Vue命令 (vue-command)

A fully working Vue.js terminal emulator.

完全正常工作的Vue.js终端模拟器。

View demo 查看演示 Download Source 下载源

特征 (Features)

• Parse arguments with yargs-parser

  使用yargs-parser解析参数

• Search history (with ↑/↓)

  搜索记录( ↑ / ↓ )

• White/Dark theme support

  白色/深色主题支持

• Autocomplete (with ↹)

  自动完成(带有↹ )

安装 (Installation)

$ npm i vue-command --save

物产 (Properties)

Property	Type	Default	Required	Description
commands	Object	{}	Yes	Key-value pairs where key is command and value is function with yargs arguments
help-text	String	Type help	No	Sets the placeholder
help-timeout	Number	4000	No	Sets the placeholder timeout
hide-bar	Boolean	false	No	Hides the bar
hide-prompt	Boolean	false	No	Hides the prompt
prompt	String	[email protected]:#	No	Sets the prompt
show-help	Boolean	false	No	Shows the placeholder
title	String	[email protected]: ~	No	Sets the title
white-theme	Boolean	false	No	Enables the white theme
yargs-options	Object	{}	No	Sets the yargs options

属性	类型	默认	需要	描述
commands	Object	{}	是	键值对，其中key是命令，value是带有yargs参数的函数
help-text	String	Type help	没有	设置占位符
help-timeout	Number	4000	没有	设置占位符超时
hide-bar	Boolean	false	没有	隐藏酒吧
hide-prompt	Boolean	false	没有	隐藏提示
prompt	String	[email protected] :#	没有	设置提示
show-help	Boolean	false	没有	显示占位符
title	String	[email protected] : ~	没有	设置标题
white-theme	Boolean	false	没有	启用白色主题
yargs-options	Object	{}	没有	设置yargs选项

用法 (Usage)

<template>
  <vue-command
    :yargs-options="{ alias: { color: ['colour'] } }"
    :commands="commands"
  />
</template>

<script>
import VueCommand from 'vue-command'
import 'vue-command/dist/vue-command.css'

export default {
  components: {
    VueCommand
  },

  data: () => ({
    commands: {
      // yargs arguments
      pokedex: ({ color, _ }) => {
        if (color && _[1] === 'pikachu') return 'yellow'

        return `Usage: pokedex pokemon [option]<br><br>

        Example: pokedex pikachu --color
        `
      }
    }
  })
}
</script>

<style lang="scss">
  .vue-command {
    .term {
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
    }

    .term-std {
      min-height: 300px;
      max-height: 300px;
      overflow-y: scroll;
    }
  }
</style>

翻译自: https://vuejsexamples.com/a-fully-working-vue-js-terminal-emulator/

vue.js适配各个终端