帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue终端模拟器(vue-command)

帝国模板之家 2020-12-31 网页特效 评论

介绍

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: () => ({})
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言