网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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: () => ({})
}
转载请注明来源:Vue终端模拟器(vue-command)
本文永久链接地址:https://www.moyouyouw.cn/code/1157.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论