|
@@ -0,0 +1,40 @@
|
|
|
+<template>
|
|
|
+ <div class="xterm" />
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import 'xterm/dist/xterm.css'
|
|
|
+import { Terminal } from 'xterm'
|
|
|
+import * as fit from 'xterm/dist/addons/fit/fit'
|
|
|
+
|
|
|
+Terminal.applyAddon(fit)
|
|
|
+
|
|
|
+export default {
|
|
|
+ mounted() {
|
|
|
+ this.$term = new Terminal({})
|
|
|
+ this.$term.open(this.$el)
|
|
|
+ this.$term.fit()
|
|
|
+ this.$term.on('blur', () => this.$emit('blur'))
|
|
|
+ this.$term.on('focus', () => this.$emit('focus'))
|
|
|
+ this.$term.on('title', title => this.$emit('title-change', title))
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeDestroy () {
|
|
|
+ this.$term.destroy()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ fit() {
|
|
|
+ this.$term.fit()
|
|
|
+ },
|
|
|
+ focus() {
|
|
|
+ this.$term.focus()
|
|
|
+ },
|
|
|
+ blur() {
|
|
|
+ this.$term.blur()
|
|
|
+ },
|
|
|
+ paste(data){
|
|
|
+ this.$term.paste(data)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|