Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/tzfun/vue-web-terminal below:

tzfun/vue-web-terminal: A feature-rich terminal emulator plugin applicable to Vue2 and Vue3.

中文版 | English

A web-side command line plugin built by Vue, supports multiple message formats such as tables, json, and codes, supports custom message styles, command line libraries, typing search prompts, etc., and simulates native terminal support ← → cursor toggle and ↑ ↓ history command toggle.

🎉 The new document is now available. It's more detailed and more friendly, welcome to experience it: https://tzfun.github.io/vue-web-terminal/

• Supported message formats: plain text, table, json, code/multi-line text, html, ansi
• Supports real-time content display and appending, and can create simple animation effects
• Support user question and answer input
• Support online text editing
• Support window dragging and fixing
• Support ← → cursor key switching and ↑ ↓ key history command switching
• Support fullscreen
• Support command input prompts
• Support logging group folding
• Supports multiple styles of slots, customizable styles
• Supports themes, with built-in dark and light themes by default, and you can also customize themes
• Provides a rich set of JS APIs, almost all functions can be simulated by APIs to simulate non-human operations
• Supports Vue2/Vue3

Short description:

It does not have the ability to execute a specific command. This ability needs to be implemented by the developer. What it is responsible for is to get the command to be executed from the user in the form of an interface, and then hand it over to the developer to implement and execute. After that, hand it over to show it to the user

You can learn about some of the features of this plugin through the Online Experience, or try editing the code and previewing it on .

Please go to Document

The Vue2 version will be officially archived from December 24, 2024 and will no longer provide maintenance updates. For the source code, see vue2 branch.

Install vue-web-terminal by npm. The 2.x.x version corresponds to vue2, and the 3.x.x version corresponds to vue3. It is recommended to download the latest version corresponding to the main version.

#  install for vue2
npm install vue-web-terminal@2.xx --save

#  install for vue3
npm install vue-web-terminal@3.xx --save 

Use Terminal plugin in main

Vue2

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

Vue3

import { createTerminal } from 'vue-web-terminal'

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')

Example:

<script setup lang="ts">
  import {Terminal, SuccessFunc, FailedFunc} from "vue-web-terminal"

  const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc) => {
    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: 'success',
        content: command
      })
    }
  }
</script>
<template>
  <div id="app">
    <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
  </div>
</template>

<style>
  body, html, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
</style>

I am a backend coder, and I know a little bit about frontend. This plugin was created out of my interest.

If you have good ideas for code optimization or functions and are willing to contribute code, please submit PR, If you have any questions about the use of the plugin or find bugs, please submitissue.

Contact me (Add please note vue-web-terminal)

📮 Email: beifengtz@qq.com

WeChat: beifeng-tz

Apache License 2.0

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4