2020-05-03 00:09

XtermVue.vue

@@ -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>

index.js

@@ -0,0 +1,8 @@
+import XtermVue from './XtermVue.vue'
+
+
+module.exports = {
+    install(Vue, options){
+        Vue.component("xterm-vue", XtermVue)
+    }
+}

package.json

@@ -0,0 +1,12 @@
+{
+    "name": "@swzry/xterm-vue",
+    "version": "1.0.0",
+    "description": "Vue plugin for xtem.js",
+    "main": "index.js",
+    "repository": "https://git.swzry.com/zry/xterm-vue",
+    "author": "ZRY",
+    "license": "MIT",
+    "dependencies": {
+        "xterm": "^4.5.0"
+    }
+}