快速上手

你可以 在线体验 一部分作者写好的示例功能，也可以在 CodeSandbox 编辑代码并运行体验。

在你打算正式使用此插件之前希望你已经阅读 关于插件 并充分了解此插件支持的功能以及它的局限性。

安装

你需要了解插件的版本号规则：

  • 2.x.x对应Vue2版本
  • 3.x.x对应Vue3版本

建议前往 releases 寻找对应Vue版本最新的版本。

npm
# for vue2
npm install vue-web-terminal@2

# for vue3
npm install vue-web-terminal@3

Vue注册

在main.js中注册插件

Vue2
import Terminal from 'vue-web-terminal'
//  3.2.0 及 2.1.13 以后版本需要引入此样式，之前版本无需引入主题样式
//  亮色主题：vue-web-terminal/lib/theme/light.css
import 'vue-web-terminal/lib/theme/dark.css'

Vue.use(Terminal)

你的第一个vue-web-terminal

<template>
  <terminal name="my-terminal"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf" />
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      dragConf: {
        width: "50%",
        height: "70%",
        zIndex: 100,
        init: {
          x: 200,
          y: 200
        },
        pinned: false
      }
    }
  },
  methods: {
    onExecCmd(key, command, success, failed) {
      if (key === 'fail') {
        failed('Something wrong!!!')
      } else {
        let allClass = ['success', 'error', 'system', 'info', 'warning'];

        let clazz = allClass[Math.floor(Math.random() * allClass.length)];
        success({
          type: 'normal',
          class: clazz,
          tag: clazz,
          content: `Your command is '${command}'`
        })
      }
    }
  }
}
</script>
<style scoped>
</style>

启动你的工程之后，如果在页面中出现一个可拖拽的终端窗口，那么恭喜你的第一个terminal应用实现了！ 你可以在窗口中输入任意命令然后回车，会随机提示不同的级别的内容。