JSPM

  • Created
  • Published
  • Downloads 521
  • Score
    100M100P100Q97044F

Package Exports

  • vue-web-terminal
  • vue-web-terminal/lib/vue-web-terminal.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-web-terminal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-web-terminal

一个由 Vue 构建的支持多内容类型显示的网页端命令行窗口插件,支持普通文本、表格、json显示、代码显示(语法高亮),支持自定义命令行库,键入搜索提示示例等。

vue-web-terminal

快速上手

npm安装vue-web-terminal

npm install vue-web-terminal --save 

入口函数调用Vue.use()

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

App.vue 中使用

<template>
  <div id="app">
    <terminal name="my-terminal"
              @execCmd="onExecCmd"
              @triggerClick="onClick"
              @onKeydown="onKeydown"
              showLogTime
              warnLogLimitEnable></terminal>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    /**
     * 当用户输入自定义命令时调用
     *
     * @param key     命令行key,用于唯一标识
     * @param command 命令行
     * @param success 成功回调
     * @param failed  失败回调
     */
    onExecCmd(key, command, success, failed) {
      if (key === 'fail') {
        failed('Something wrong!!!')
      } else if (key === 'json') {
        //  do something here
        success({
          type: 'json',
          class: 'success',
          content: {
            k1: 'welcome to vue-web-terminal',
            k2: 120,
            k3: ['h', 'e', 'l', 'l', 'o'],
            k4: {k41: 2, k42: '200'}
          }
        })
      } else if (key === 'code') {
        success({
          type: 'code',
          class: 'system',
          content: 'import Terminal from \'vue-web-terminal\'\n' +
              '\n' +
              'Vue.use(Terminal)'
        })
      } else {
        success({
          type: 'normal',
          class: 'success',
          tag: '成功',
          content: command
        })
      }
    },
    onClick(key) {
      console.log("trigger click: " + key)
    },
    onKeydown(event) {
      console.log(event)
    }
  }
}
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
}
</style>