Skip to content

Commit 31623d5

Browse files
tzfuntzfun
committed
update README
1 parent 6d1b4e6 commit 31623d5

File tree

2 files changed

+121
-101
lines changed

2 files changed

+121
-101
lines changed

‎README.md

Lines changed: 60 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ A web-side command line plugin built by `Vue`, supports multiple message formats
1616

1717
## Feature Support
1818

19-
* Supported message formats: `text`, `table`, `json`, `code`/multiline text, `html`
19+
* Supported message formats: `text`, `table`, `json`, `code/multiline text`, `html`, `ansi`
2020
* Support [Flash](#Flash) real-time echo
2121
* Support user input.(For example, enter username and password to log in)
2222
* Support `Highlight.js`, `Codemirror.js` code highlighting
@@ -26,15 +26,17 @@ A web-side command line plugin built by `Vue`, supports multiple message formats
2626
* Support window drag
2727
* Support for multi-line text editing
2828
* Support custom command library and search for help tips, use the `Tab` key to quickly fill
29-
* Support User inputting filter
29+
* Support user inputting filter
3030
* Support API interface: execute command, push message, simulate drag and drop, execute, full screen, etc.
3131
* Provides multiple slots to support custom styles
3232

3333
![vue-web-terminal](./public/vue-web-terminal.gif)
3434

3535
> Short description:
3636
>
37-
> 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
37+
> It does not have the ability to execute a specific command. This ability needs to be implemented by the developer.
38+
> What it is responsible for is to get the command to be executed from the user in the form of an interface, and then
39+
> hand it over to the developer to implement and execute. After that, hand it over to show it to the user
3840
3941
# Online Experience
4042

@@ -44,7 +46,8 @@ Demo：[https://tzfun.github.io/vue-web-terminal/](https://tzfun.github.io/vue-w
4446

4547
# Quick Start
4648

47-
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.
49+
Install vue-web-terminal by npm. The `2.x.x` version corresponds to vue2, and the `3.x.x` version corresponds to vue3.
50+
It is recommended to download the latest version corresponding to the main version.
4851

4952
```shell
5053
# install for vue2
@@ -121,10 +124,10 @@ Terminal tag supports attribute parameter table.
121124

122125
| Argument | Description | Type | Default |
123126
|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------|----------------------------------------------------|
124-
| name | Terminal instance name, the name of the same vue instance must be unique, this value is also used in Api. | string | terminal |
127+
| name | Terminal instance name, the name of the same vue instance must be unique, this value is also used in API. | string | terminal |
125128
| context | Context text. | string | /vue-web-terminal |
126129
| title | The title displayed in the header. | string | vue-web-terminal |
127-
| show-header | Whether to display the header, this switch will affect the drag and drop function. | boolean | true |
130+
| show-header | Whether to display the header, this switch will affect the drag and [drop](#Drag) function. Only when the header is displayed can the drag and drop function provided by default be used. | boolean | true |
128131
| init-log | The log displayed when Terminal is initialized. It is an array composed of [Message](#Message), `null` is not displayed. | array | / |
129132
| warn-log-count-limit | If the current Terminal log number exceeds this limit, a warning will be issued. Setting a value of `<= 0` will not issue a warning. | number | 200 |
130133
| auto-help | Whether to enable the command line automatic search prompt function. | boolean | true |
@@ -147,24 +150,24 @@ Terminal tag supports attribute parameter table.
147150

148151
Terminal tag support event table
149152

150-
| Event name | Description | Callback arguments |
151-
|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------|
152-
| exec-cmd | Fired when a custom command is executed. `success` and `failed` are callback functions, **must call one of the two callbacks before echoing!**, the meaning of the `success` callback parameter is described below, and the `failed` callback parameter is a string. | `(cmdKey, command, success, failed, name)` |
153-
| before-exec-cmd | Triggered before the user presses Enter to execute the command. | `(cmdKey, command, name)` |
154-
| on-keydown | When the cursor focus is obtained, press any keyboard to trigger. | `(event, name)` |
155-
| on-click | Triggered when the user clicks the button, the parameter `key` is the unique identification of the button, there are buttons: `close`, `minScreen`, `fullScreen`, `title`. | `(key, name)` |
156-
| init-before | Lifecycle function, triggered before plugin initialization. | `(name)` |
157-
| init-complete | Lifecycle function, triggered after plugin initialization is complete. | `(name)` |
158-
| on-active | Triggered when the window is active. | `(name)` |
159-
| on-inactive | Triggered when the window is inactive. | `(name)` |
153+
| Event name | Description | Callback arguments |
154+
|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------|
155+
| exec-cmd | Fired when a custom command is executed. `success` and `failed` are callback functions, **must call one of the two callbacks before echoing**! the meaning of the `success` callback parameter is described below, and the `failed` callback parameter is a string. | `(cmdKey, command, success, failed, name)` |
156+
| before-exec-cmd | Triggered before the user presses Enter to execute the command. | `(cmdKey, command, name)` |
157+
| on-keydown | When the cursor focus is obtained, press any keyboard to trigger. | `(event, name)` |
158+
| on-click | Triggered when the user clicks the button, the parameter `key` is the unique identification of the button, there are buttons: `close`, `minScreen`, `fullScreen`, `title`. | `(key, name)` |
159+
| init-before | Lifecycle function, triggered before plugin initialization. | `(name)` |
160+
| init-complete | Lifecycle function, triggered after plugin initialization is complete. | `(name)` |
161+
| on-active | Triggered when the window is active. | `(name)` |
162+
| on-inactive | Triggered when the window is inactive. | `(name)` |
160163

161164
**Special note**: The `success` callback parameter of `exec-cmd` supports multiple data types, and the execution logic of different data types will be different:
162165

163166
* If no parameters are passed, the execution will end immediately
164167
* Passing in a [Message](#Message) will append a message to the record and end the execution immediately
165168
* Pass in a [Message](#Message) array, which will append multiple messages to the record and end the execution immediately
166-
* Pass in a `Terminal.$Flash` object, it will enter the processing logic of [Real-time-echo(Flash)](#Flash), this execution will not end until `finish()` is called
167-
* Pass in a `Terminal.$Ask` object, it will enter the processing logic of [user-input](#User-input), this execution will not end until `finish()` is called
169+
* Pass in a `TerminalFlash` object, it will enter the processing logic of [Real-time-echo(Flash)](#Flash), this execution will not end until `finish()` is called
170+
* Pass in a `TerminalAsk` object, it will enter the processing logic of [user-input](#User-input), this execution will not end until `finish()` is called
168171

169172
> PS:
170173
>
@@ -192,35 +195,32 @@ Terminal supports the following custom slots, this feature is supported in `2.0.
192195
example:
193196

194197
```vue
195-
196198
<terminal :name="name" @exec-cmd="onExecCmd">
197-
<template #header>
198-
This is my custom header
199-
</template>
200-
201-
<template #json="data">
202-
{{ data.message }}
203-
</template>
204-
205-
<template #helpBox="{showHeader, item}">
206-
{{ item }}
207-
</template>
208-
209-
<template #textEditor="{data}">
210-
<textarea name="editor" class="t-text-editor" v-model="data.value"
211-
@focus="data.onFocus" @blur="data.onBlur"></textarea>
212-
<div class="t-text-editor-floor" align="center">
213-
<button class="t-text-editor-floor-btn" @click="_textEditorClose">Save & Close(Ctrl + S)</button>
214-
</div>
215-
</template>
199+
<template #header>
200+
This is my custom header
201+
</template>
202+
203+
<template #json="data">
204+
{{ data.message }}
205+
</template>
206+
207+
<template #helpBox="{showHeader, item}">
208+
{{ item }}
209+
</template>
210+
211+
<template #textEditor="{data}">
212+
<textarea name="editor" class="t-text-editor" v-model="data.value"
213+
@focus="data.onFocus" @blur="data.onBlur"></textarea>
214+
<div class="t-text-editor-floor" align="center">
215+
<button class="t-text-editor-floor-btn" @click="_textEditorClose">Save & Close(Ctrl + S)</button>
216+
</div>
217+
</template>
216218
</terminal>
217219
```
218220

219-
## Api
221+
## API
220222

221-
This plugin provides some APIs that can use javascript to actively initiate event requests to the plugin.
222-
223-
You have two ways to call the API:
223+
This plugin provides some API that can use javascript to actively initiate event requests to the plugin. You have two ways to call the API:
224224

225225
1). **Get the global API object**
226226

@@ -317,7 +317,7 @@ TerminalApi.dragging('my-terminal', {
317317

318318
### execute()
319319

320-
You can use the api to execute a command to the Terminal, and the execution process will be echoed in the Terminal window. This is a way to use a script to simulate the user executing the command.
320+
You can use the API to execute a command to the Terminal, and the execution process will be echoed in the Terminal window. This is a way to use a script to simulate the user executing the command.
321321

322322
```js
323323
TerminalApi.execute('my-terminal', 'help :local')
@@ -328,14 +328,14 @@ TerminalApi.execute('my-terminal', 'help :local')
328328
Get the Terminal input focus. There are two input points in the plugin, one is command line input, the other is [User-input](#User-input).
329329

330330
```js
331-
TerminalApi.focus('my-terminal')
331+
TerminalApi.focus('my-terminal', true)
332332
```
333333

334334
### elementInfo()
335335

336336
[Online Demo](https://tzfun.github.io/vue-web-terminal/?cmd=info)
337337

338-
Get the DOM information of the terminal window. You can use this api to get the terminal's screen width and height, the width and height of the displayed content, the location, the width of a single character, etc. The unit is px.
338+
Get the DOM information of the terminal window. You can use this API to get the terminal's screen width and height, the width and height of the displayed content, the location, the width of a single character, etc. The unit is px.
339339

340340
```js
341341
let info = TerminalApi.elementInfo('my-terminal')
@@ -793,10 +793,10 @@ asker.ask({
793793

794794
#### Use API
795795

796-
When you want to edit multi-line text, you can use the API: `textEditorOpen()`, `textEditorClose()`. For details, please refer to the [API](#Api) section. The following is a simple example:
796+
When you want to edit multi-line text, you can use the API: `textEditorOpen()`, `textEditorClose()`. For details, please refer to the [API](#API) section. The following is a simple example:
797797

798798
```js
799-
TerminalApi.textEditorOpen(this.name, {
799+
TerminalApi.textEditorOpen('my-terminal', {
800800
content: 'Please edit this file',
801801
onClose: (value) => {
802802
console.log("User edit completed, text result:", value)
@@ -817,7 +817,6 @@ If you don't like the default style, you can use Slot to customize the style of
817817
The plugin provides an `onKeydown` event, which is the best way for you to control the shortcut keys of the Terminal in **active state**, here we take the text editor as an example, set the user to press the shortcut key `Ctrl + S` to indicate Finish editing and save.
818818

819819
```vue
820-
821820
<template>
822821
<terminal :name="name" @exec-cmd="onExecCmd" @on-keydown="onKeydown">
823822
<template #textEditor="{ data }">
@@ -877,10 +876,9 @@ export default {
877876
</script>
878877
```
879878

880-
# About the author
879+
# Contact
881880

882-
I am a Java Coder, and I only know a little bit about the web(js, vue). I developed this plugin because of my interest and work needs.
883-
When you see the poor source code of this plugin, please understand that.
881+
I am a back-end Coder, and I only know a little about the front-end. I developed this plug-in because of my personal interest.
884882

885883
If you have good ideas for code optimization or functions and are willing to contribute code, please submit [PR](https://github.com/tzfun/vue-web-terminal/pulls),
886884
If you have any questions about the use of the plugin or find bugs, please submit[issue](https://github.com/tzfun/vue-web-terminal/issues).
@@ -891,6 +889,17 @@ If you have any questions about the use of the plugin or find bugs, please submi
891889
>
892890
> ![](https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon16_wx_logo.png) *beifeng-tz* (Add please note vue-web-terminal)
893891
892+
## Communication group
893+
894+
If you have any questions or encounter problems, you can ask them in the communication group, add me to the group on WeChat (see the contact information above)
895+
896+
## Donate
897+
898+
This plugin is completely open source and free, and it is not easy to create. If you think it is good, you can donate to support this project.
899+
900+
Thank you for your donation:
901+
* [zhangpeng1314](https://gitee.com/zhangpeng1314) - ￥150
902+
894903
# License
895904

896905
[Apache License 2.0](LICENSE)

0 commit comments

Comments
 (0)