gterm/src/src/components/XTerm.vue

46 lines
840 B
Vue

<template lang="pug">
.console#terminal
</template>
<script>
import {Terminal} from 'xterm'
import {FitAddon} from 'xterm-addon-fit'
export default {
data () {
return {
term: null,
terminalSocket: null,
fitaddon: null
}
},
mounted(){
console.log("mounted")
let terminalContainer = document.getElementById('terminal')
this.term = new Terminal()
this.fitaddon = new FitAddon()
this.term.loadAddon(this.fitaddon)
this.term.open(terminalContainer)
this.fitaddon.fit()
this.term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
console.log(this.term)
},
Unmounted () {
this.term.dispose()
},
methods:{
}
}
</script>
<style lang="scss">
@import '~xterm/css/xterm.css';
.console {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>