vue+xterm.js 实现Linux command界面

最新推荐文章于 2024-08-09 08:24:36 发布

lxlmycsdnfree

最新推荐文章于 2024-08-09 08:24:36 发布

阅读量2.6w

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/lxlmycsdnfree/article/details/82771367

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

首先安装 node 安装xterm

npm i xterm --save

在 main.js 中加入：

import 'xterm/dist/xterm.css'

创建 Console.vue

<template>
    <div class="console" id="terminal"></div>
</template>
<script>
import Terminal from './Xterm'
export default {
  name: 'Console',
  props: {
    terminal: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      term: null,
      terminalSocket: null
    }
  },
  methods: {
    runRealTerminal () {
      console.log('webSocket is finished')
    },
    errorRealTerminal () {
      console.log('error')
    },
    closeRealTerminal () {
      console.log('close')
    }
  },
  mounted () {
    console.log('pid : ' + this.terminal.pid + ' is on ready')
    let terminalContainer = document.getElementById('terminal')
    this.term = new Terminal()
    this.term.open(terminalContainer)
    this.term._initialized = true
    console.log('mounted is going on')
	this.term.fit()
  },
  beforeDestroy () {
    this.terminalSocket.close()
    this.term.destroy()
  }
}
</script>

增加Xterm.js 文件：

import { Terminal } from 'xterm'
import * as fit from 'xterm/lib/addons/fit/fit'
import * as attach from 'xterm/lib/addons/attach/attach'
Terminal.applyAddon(fit)
Terminal.applyAddon(attach)

export default Terminal

demo vue:

<template>
	<section>
	    <div id="log" style="margin-top:20px;">
			    <my-terminal :terminal="terminal" ref="xterm"></my-terminal>
	    </div>
	</section>
</template>

<script>
import Console from './Console'
	export default {
		data () {
			return {

			env: "",
			podName: "",
			contaName: "",
			logtxt: "",

			 terminal: {
			        pid: 1,
			        name: 'terminal',
			        cols: 1000,
			        rows: 1000
			      },
				
			}
		},
		methods: {
			
		},
		mounted(){

		   var param = this.$route.params.name;
		   var arr =  param.split("==");
		   this.env = arr[0]
		   this.podName = arr[1]
           this.contaName = arr[2]

		   this.$http.get('/***/api/v1/***/pod/logs?env=' + this.env + '&podName=' + this.podName + "&cntnerName=" + this.contaName)
			   .then(function(response){
				let resp = response.data;
				if(resp.success){
				  this.logtxt = resp.data.replicas
				  this.logtxt = this.logtxt.replace(/\n/g, "\r\n")
				  this.$refs.xterm.term.write(this.logtxt)
				  this.$refs.xterm.term.write(this.logtxt)
				  this.$refs.xterm.term.fit()

				  }else{
				    this.$message.error("获取日志信息失败！" + resp.errorMsg);
				  }
			  })
			  .catch(function(err){
			   this.$message.error("获取日志信息失败！" + err.message);
			  });
			
		},

		components: {
		    'my-terminal': Console
		}
	}
</script>

<style scoped>


</style>

效果：