You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -115,7 +117,7 @@ Terminal tag supports attribute parameter table.
115
117
| show-header | Whether to display the header, this switch will affect the drag and drop function. | boolean | true |
116
118
| init-log | The log displayed when Terminal is initialized. It is an array composed of [Message](#Message), `null` is not displayed. | array | / |
117
119
| init-log-delay | The interval between each log when initializing the display log, in milliseconds. | number | 150 |
118
-
|~~show-log-time~~|~~Whether to display the time when the message **type** is `normal`.~~`2.0.13`和`3.0.13`版本开始移除 | boolean | true |
120
+
|~~show-log-time~~|~~Whether to display the time when the message **type** is `normal`.~~`2.0.14` and `3.0.13` versions have been removed| boolean | true |
119
121
| warn-log-byte-limit | The current Terminal log occupied memory size exceeds this limit will issue a warning, the unit `byte`. | number | 1024 * 1024 * 10 |
120
122
| warn-log-count-limit | If the current Terminal log number exceeds this limit, a warning will be issued. | number | 200 |
| execCmd | Fired when a custom command is executed. `success` and `failed` are callback functions, **must call one of the two callbacks before echoing!**, where the `success` callback parameter is a [Message](#Message) or an array of message objects, and the `failed` callback parameter is a string. |`(cmdKey, command, success, failed, name)`|
136
-
| beforeExecCmd | Triggered before the user presses Enter to execute the command. |`(cmdKey, command, name)`|
137
-
| onKeydown | When the cursor focus is obtained, press any keyboard to trigger. |`(event, name)`|
138
-
| onClick | 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)`|
139
-
| initBefore | Lifecycle function, triggered before plugin initialization. |`(name)`|
140
-
| initComplete | Lifecycle function, triggered after plugin initialization is complete. |`(name)`|
| execCmd | 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)`|
138
+
| beforeExecCmd | Triggered before the user presses Enter to execute the command. |`(cmdKey, command, name)`|
139
+
| onKeydown | When the cursor focus is obtained, press any keyboard to trigger. |`(event, name)`|
140
+
| onClick | 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)`|
141
+
| initBefore | Lifecycle function, triggered before plugin initialization. |`(name)`|
142
+
| initComplete | Lifecycle function, triggered after plugin initialization is complete. |`(name)`|
143
+
144
+
**Special note**: The `success` callback parameter of `execCmd` supports multiple data types, and the execution logic of different data types will be different:
145
+
146
+
* Passing in a [Message](#Message) will append a message to the record and end the execution immediately
147
+
* Pass in a [Message](#Message) array, which will append multiple messages to the record and end the execution immediately
148
+
* 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
149
+
* 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
141
150
142
151
## Slots
143
152
@@ -152,6 +161,7 @@ Terminal supports the following custom slots, this feature is supported in `2.0.
| html | { message } | Custom `html` type message. |
164
+
| flash | { content } | Custom flash style |
155
165
156
166
example:
157
167
@@ -171,29 +181,6 @@ example:
171
181
</terminal>
172
182
```
173
183
174
-
## Drag
175
-
176
-
To enable drag and drop, you need to set `showHeader` to true and configure `dragConf`. You can configure the window size through `width` and `height` of dragConf.
| width | The width of the drag window, which can be a number (in px) or a percentage (relative to the browser window). | number/string |
189
-
| height | Drag window height, which can be a number (in px) or a percentage (relative to the browser window). | number/string |
190
-
| zIndex | Window level, default 100. | number |
191
-
| init | Window initialization position, if not filled, the default position is in the center of the browser window, where x and y are in px. ``` {"x": 700, "y": 500}```| object |
192
-
193
-
194
-
195
-
In addition to mouse control, you can also [call API to simulate dragging](#dragging())
196
-
197
184
## Api
198
185
199
186
This plugin provides some APIs that can use Vue to actively initiate event requests to the plugin.
@@ -287,7 +274,9 @@ You can use the api to execute a command to the Terminal, and the execution proc
**This api has been removed after `2.0.14` and `3.0.13` version, please use `elementInfo()`**
291
280
292
281
When in drag mode, this interface can get the position of the window.
293
282
@@ -303,28 +292,58 @@ Get input focus
303
292
Terminal.$api.focus('my-terminal')
304
293
```
305
294
295
+
### elementInfo()
296
+
297
+
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.
298
+
299
+
```js
300
+
let info =Terminal.$api.elementInfo('my-terminal')
301
+
```
302
+
303
+
The info data structure is as follows:
304
+
305
+
```json
306
+
{
307
+
"pos": {
308
+
"x": 100,
309
+
"y": 100
310
+
},
311
+
"screenWidth": 700,
312
+
"screenHeight": 500,
313
+
"clientWidth": 690,
314
+
"clientHeight": 490,
315
+
"charWidth": {
316
+
"en": 7.2,
317
+
"cn": 14
318
+
}
319
+
}
320
+
```
321
+
322
+
The following image clearly describes what these values mean:
323
+
324
+
325
+
306
326
## Message
307
327
308
328
This plugin defines a message object, any message must be defined in this format to display correctly.
| time | Message generation time, only valid for type `normal`. | string | / |
313
332
| class | Message class. | string | success、error、system、info、warning |
314
333
| tag | Display label, only valid for type `normal`. | string | / |
315
334
| type | Message format type, default is `normal`. | string | normal、json、code、table、html |
316
335
| content | The specific content, the content type of different message formats is different, the specific rules are as follows. | string、json、object、array | / |
317
336
318
337
### normal
319
338
320
-
The content is in string format and supports html tags. The time field will be automatically filled in when pushing. The content is required, and the others are optional.
339
+
The content is in string format and supports html tags. The content is required, and the others are optional.
321
340
322
341
```json
323
342
{
324
343
"time": "2022-02-17 18:12:20",
325
344
"class": "success",
326
345
"type": "normal",
327
-
"content": "这是一条普通文本消息",
346
+
"content": "This is a text message",
328
347
"tag": "Tag success"
329
348
}
330
349
```
@@ -573,6 +592,111 @@ Terminal has the following built-in commands by default and cannot be replaced.
573
592
]
574
593
```
575
594
595
+
## Advanced Features
596
+
597
+
### Drag
598
+
599
+
To enable drag and drop, you need to set `showHeader` to true and configure `dragConf`. You can configure the window size through `width` and `height` of dragConf.
| width | The width of the drag window, which can be a number (in px) or a percentage (relative to the browser window). | number/string |
612
+
| height | Drag window height, which can be a number (in px) or a percentage (relative to the browser window). | number/string |
613
+
| zIndex | Window level, default 100. | number |
614
+
| init | Window initialization position, if not filled, the default position is in the center of the browser window, where x and y are in px. ``` {"x": 700, "y": 500}```| object |
615
+
616
+
617
+
618
+
In addition to mouse control, you can also [call API to simulate dragging](#dragging())
619
+
620
+
### Flash
621
+
622
+
The default messages of Terminal are displayed in append mode. When you need to display only the execution process,
623
+
this process is only seen during execution. When the content does not want to exist in the record after the execution,
624
+
Flash is a good choice. For example, when `gradle` or `npm` download dependencies, the process of downloading the progress bar animation.
625
+
626
+
In the `execCmd` event callback of [Events](#Events), the `success` callback function supports the incoming Flash processing object.
627
+
628
+
Create a new flash object through `new Terminal.$Flash()` and pass it into the success callback. The flash object provides two methods:
629
+
630
+
*`flush(string)`: Update what is currently displayed
631
+
*`finish()`: End execution
632
+
633
+
```js
634
+
let flash =newTerminal.$Flash()
635
+
success(flash)
636
+
637
+
let count =0
638
+
let flashInterval =setInterval(() => {
639
+
flash.flush(`This is flash content: ${count}`)
640
+
641
+
if (++count >=20) {
642
+
clearInterval(flashInterval)
643
+
flash.finish()
644
+
}
645
+
}, 200)
646
+
```
647
+
648
+
### User-input
649
+
650
+
When you need to ask the user, you can use this function to get the content entered by the user,
651
+
such as the scenario where the user needs to enter the username and password when logging in.
652
+
653
+
In the `execCmd` event callback of [Events](#Events), the `success` callback function supports incoming user input processing objects.
654
+
655
+
Create a new ask object through `new Terminal.$Ask()` and pass it into the success callback. The ask object provides two methods:
656
+
657
+
*`ask(options)`: Initiate a user to ask for input, options is an object, and its properties are explained as follows (* indicates required):
658
+
**`question`: string, The question to ask, or a prefix string that can be understood as user input
659
+
**`callback`: function, The callback when the user types an enter key, the parameter value is the content entered by the user
660
+
*`autoReview`: bool, Whether to automatically append the current display content when the user types an enter key
661
+
*`isPassword`: bool, Whether it is a password input
662
+
*`finish()`: End execution
663
+
664
+
```js
665
+
let asker =newTerminal.$Ask()
666
+
success(asker)
667
+
668
+
asker.ask({
669
+
question:'Please input github username: ',
670
+
autoReview:true,
671
+
callback:value=> {
672
+
console.log(value)
673
+
asker.ask({
674
+
question:'Please input github password: ',
675
+
autoReview:true,
676
+
isPassword:true,
677
+
callback:() => {
678
+
// do something
679
+
asker.finish()
680
+
}
681
+
})
682
+
}
683
+
})
684
+
```
685
+
686
+
# About the author
687
+
688
+
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.
689
+
When you see the poor source code of this plugin, please understand that.
690
+
691
+
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),
692
+
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).
0 commit comments