You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
<template>
|
|
<div class="console">
|
|
<div @keypress.enter="execCommand()" class="group" v-for="(group, index) in history" :key="group">
|
|
<pre><span class="host">{{group.host}}</span><span
|
|
v-if="index !== history.length-1">{{group.command}}</span><input v-else v-model="group.command" type="text"></pre>
|
|
<pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import commands from "@/render-commands.js"
|
|
commands.methods.renderCommand()
|
|
export default {
|
|
name: "console",
|
|
data(){
|
|
return{
|
|
history:commands.data().history
|
|
}
|
|
},
|
|
methods:{
|
|
execCommand(){
|
|
commands.methods.renderCommand()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
pre{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.console{
|
|
color: #fff;
|
|
.group{
|
|
.host{color: #02a594;}
|
|
.white{color: #fff}
|
|
.green{color: #44dd88;}
|
|
.blue{color: #0081b1;}
|
|
input{
|
|
background-color: #0000;
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #fff;
|
|
font: inherit;
|
|
}
|
|
}
|
|
}
|
|
</style> |