|
@@ -5,26 +5,22 @@
|
|
|
import 'xterm/css/xterm.css'
|
|
|
import { Terminal } from 'xterm'
|
|
|
import { FitAddon } from 'xterm-addon-fit'
|
|
|
-
|
|
|
-Terminal.applyAddon(FitAddon)
|
|
|
+import { WebLinksAddon } from 'xterm-addon-web-links'
|
|
|
|
|
|
export default {
|
|
|
mounted() {
|
|
|
this.$term = new Terminal({})
|
|
|
+ this.$fitAddon = new FitAddon()
|
|
|
+ this.$term.loadAddon(this.$fitAddon)
|
|
|
+ this.$term.loadAddon(new WebLinksAddon())
|
|
|
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))
|
|
|
+ this.$fitAddon.fit()
|
|
|
+ this.$term.onTitleChange((title) => this.$emit('title-change', title))
|
|
|
},
|
|
|
|
|
|
- beforeDestroy () {
|
|
|
- this.$term.destroy()
|
|
|
- },
|
|
|
-
|
|
|
methods: {
|
|
|
fit() {
|
|
|
- this.$term.fit()
|
|
|
+ this.$fitAddon.fit()
|
|
|
},
|
|
|
focus() {
|
|
|
this.$term.focus()
|
|
@@ -37,4 +33,10 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.xterm {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|