Vuejs component for displaying UI element that acts as console terminal. Actual terminal logic code forked from Ptty.
npm i vue-terminal-ui --save
// import plugin
import VueTerminal from 'vue-terminal-ui'
// add to components section
components{
VueTerminal
},
// add method to call on command is typed
methods: {
onCliCommand(data, resolve, reject){
// typed command is available in data.text
// don't forget to resolve or reject the Promise
setTimeout(()=> {
resolve('')
}, 300)
}
},
// use in template
<VueTerminal :intro="intro"
console-sign="$"
allow-arbitrary
height="500px"
@command="onCliCommand"></VueTerminal>
props
intro
(String) - intro text when terminal starts;console-sign
(String) - starting symbol for each command line, eg. my-folder/master $
or just >>
;allow-arbitrary
(Boolean) - allow type any command in addition to basic ones, then @command
will be called;height
(String) - UI block height, eg. 500px
;event
@command
- callback function to call with command; accepts text, and resolve/reject callbacksAuthor: shershen08
Demo: https://codesandbox.io/s/4xxxkznk74
Source Code: https://github.com/shershen08/vue-terminal-ui
#vue #vuejs #javascript