Skip to content

Commit f9b84ae

Browse files
tzfuntzfun
committed
publish 2.1.3
1 parent 8750660 commit f9b84ae

File tree

4 files changed

+219
-97
lines changed

4 files changed

+219
-97
lines changed

‎README.md‎

Lines changed: 110 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ A web-side command line plugin built by `Vue`, supports multiple message formats
2323
* Support for multi-line text editing
2424
* Support custom command library and search for help tips, use the `Tab` key to quickly fill
2525
* Support User inputting filter
26-
* Support API interface: execute command, push message, simulate drag and drop, get position, full screen, modify context, etc.
26+
* Support API interface: execute command, push message, simulate drag and drop, execute, full screen, etc.
2727
* Provides multiple slots to support custom styles
2828

2929
![vue-web-terminal](./public/vue-web-terminal.gif)
@@ -118,7 +118,7 @@ Terminal tag supports attribute parameter table.
118118
| Argument | Description | Type | Default |
119119
|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|--------------------------------------------------|
120120
| name | Terminal instance name, the name of the same vue instance must be unique, this value is also used in Api. | string | terminal |
121-
| context | Initialize context text. | string | /vue-web-terminal |
121+
| context | Context text. | string | /vue-web-terminal |
122122
| title | The title displayed in the header. | string | vue-web-terminal |
123123
| show-header | Whether to display the header, this switch will affect the drag and drop function. | boolean | true |
124124
| init-log | The log displayed when Terminal is initialized. It is an array composed of [Message](#Message), `null` is not displayed. | array | / |
@@ -164,18 +164,18 @@ Terminal tag support event table
164164

165165
Terminal supports the following custom slots, this feature is supported in `2.0.11` and `3.0.8` versions and later.
166166

167-
| Slot name | Arguments | Description |
168-
|--------------|----------------------|---------------------------------------------------------------------|
169-
| header | / | Customize the header style, still retain the drag area. |
170-
| helpBox | { showHeader, item } | Custom command search result prompt box, item is the search result. |
171-
| normal | { message } | Custom `normal` type message. |
172-
| json | { message } | Custom `json` type message. |
173-
| table | { message } | Custom `table` type message. |
174-
| code | { message } | Custom `code` type message. |
175-
| html | { message } | Custom `html` type message. |
176-
| flash | { content } | Custom flash style. |
177-
| helpCmd | { item } | Custom command search prompt style. |
178-
| textEditor | { data } | Custom text editor style. |
167+
| Slot name | Arguments | Description |
168+
|--------------|----------------------|-----------------------------------------------------------------------------------------------------------|
169+
| header | / | Customize the header style, still retain the drag area. |
170+
| helpBox | { showHeader, item } | Custom command search result prompt box, item is the search result. |
171+
| normal | { message } | Custom `normal` type message. |
172+
| json | { message } | Custom `json` type message. |
173+
| table | { message } | Custom `table` type message. |
174+
| code | { message } | Custom `code` type message. |
175+
| html | { message } | Custom `html` type message. |
176+
| flash | { content } | Custom flash style. |
177+
| helpCmd | { item } | Custom command search prompt style. |
178+
| textEditor | { data } | Custom text editor style. For more information on how to use text editors, see [Text Editor](#TextEditor) |
179179
example:
180180

181181
```vue
@@ -217,7 +217,8 @@ Terminal.$api
217217

218218
> Removed api
219219
>
220-
> * getPosition: removed after `2.0.14` and `3.0.13`, please use `elementInfo()`
220+
> * getPosition: removed after `2.0.14` and `3.0.13`, please use `elementInfo()`.
221+
> * updateContext: removed after `2.1.3` and `3.1.3`, just modify the bound context variable directly.
221222
222223
### pushMessage()
223224

@@ -246,36 +247,6 @@ let messages = [
246247
Terminal.$api.pushMessage(name, messages)
247248
```
248249

249-
### updateContext()
250-
251-
[Online Demo](https://tzfun.github.io/vue-web-terminal/?cmd=context%20%E4%BD%A0%E5%A5%BD(*%C2%B4%E2%96%BD%EF%BD%80)%E3%83%8E%E3%83%8E)
252-
253-
For example, */vue-web-terminal/beifengtz* in the current input line `$ /vue-web-terminal/beifengtz > ` is the context, and the context text can be freely set by the developer, but you need to use `.sync` to bind a variable.
254-
255-
```vue
256-
<template>
257-
<div id="app">
258-
<terminal name="my-terminal" :context.sync="context"></terminal>
259-
</div>
260-
</template>
261-
262-
<script>
263-
import Terminal from "vue-web-terminal"
264-
265-
export default {
266-
name: 'App',
267-
data() {
268-
return {
269-
context: '/hello'
270-
}
271-
},
272-
mounted() {
273-
Terminal.$api.updateContext("my-terminal", '/home/beifengtz')
274-
}
275-
}
276-
</script>
277-
```
278-
279250
### fullscreen()
280251

281252
Make the current terminal enter or exit full screen.
@@ -355,7 +326,7 @@ The following image clearly describes what these values mean:
355326

356327
### textEditorOpen()
357328

358-
A text editor will open after this API call
329+
A text editor will open after this API call.
359330

360331
```js
361332
Terminal.$api.textEditorOpen('my-terminal', {
@@ -368,6 +339,8 @@ Terminal.$api.textEditorOpen('my-terminal', {
368339

369340
`content` is the preset content when opening the editor. If you don’t want to preset any content, you can leave this parameter blank. When the user clicks Close or actively calls the `textEditorClose()` method, the `onClose` callback will be triggered, and the parameter `value` is the text content in the current editor.
370341

342+
For more information on how to use text editors, see [Text Editor](#TextEditor).
343+
371344
### textEditorClose()
372345

373346
This method is used to close the currently opened text editor. After calling, it will trigger the `onClose` callback when it is opened.
@@ -723,8 +696,8 @@ In the `execCmd` event callback of [Events](#Events), the `success` callback fun
723696
Create a new ask object through `new Terminal.$Ask()` and pass it into the success callback. The ask object provides two methods:
724697

725698
* `ask(options)`: Initiate a user to ask for input, options is an object, and its properties are explained as follows (* indicates required):
726-
* *`question`: string, The question to ask, or a prefix string that can be understood as user input
727-
* *`callback`: function, The callback when the user types an enter key, the parameter value is the content entered by the user
699+
* `question`: string, The question to ask, or a prefix string that can be understood as user input
700+
* `callback`: function, The callback when the user types an enter key, the parameter value is the content entered by the user
728701
* `autoReview`: bool, Whether to automatically append the current display content when the user types an enter key
729702
* `isPassword`: bool, Whether it is a password input
730703
* `finish()`: End execution
@@ -751,6 +724,95 @@ asker.ask({
751724
})
752725
```
753726

727+
### TextEditor
728+
729+
[Online Demo](https://tzfun.github.io/vue-web-terminal/?cmd=edit)
730+
731+
#### Use API
732+
733+
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:
734+
735+
```js
736+
Terminal.$api.textEditorOpen(this.name, {
737+
content: 'Please edit this file',
738+
onClose: (value) => {
739+
console.log("User edit completed, text result:", value)
740+
}
741+
})
742+
```
743+
744+
#### Slot custom style
745+
746+
If you don't like the default style, you can use Slot to customize the style of the editor (such as changing to Codemirror or VS Code ?), the parameter is `data`, and data has three attributes that you need to care about:
747+
748+
* `value`: The edited text content, you need to bind it with `v-model` in the editor you implement.
749+
* `onFoucs`: Get the focus event, you need to bind the `@focus` event in the editor you implement.
750+
* `onBlur`: Lost focus event, you need to bind the `@blur` event in the editor you implement.
751+
752+
**Custom Shortcuts**
753+
754+
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.
755+
756+
```vue
757+
<template>
758+
<terminal :name="name" @execCmd="onExecCmd" @onKeydown="onKeydown">
759+
<template #textEditor="{ data }">
760+
<textarea name="editor"
761+
class="text-editor"
762+
v-model="data.value"
763+
@focus="data.onFocus"
764+
@blur="data.onBlur"></textarea>
765+
766+
<div class="text-editor-floor" align="center">
767+
<button class="text-editor-floor-btn" @click="_textEditorClose">Save & Close</button>
768+
</div>
769+
770+
</template>
771+
</terminal>
772+
</template>
773+
774+
<script>
775+
import Terminal from "vue-web-terminal";
776+
777+
export default {
778+
name: "TerminalOldDemo",
779+
components: {Terminal},
780+
data() {
781+
return {
782+
name: "my-terminal",
783+
enableTextEditor: false
784+
}
785+
},
786+
method: {
787+
onExecCmd(key, command, success, failed) {
788+
if (key === 'edit') {
789+
Terminal.$api.textEditorOpen(this.name, {
790+
content: 'Please edit this file',
791+
onClose: (value) => {
792+
this.enableTextEditor = false
793+
success({
794+
type: "code",
795+
content: value
796+
})
797+
}
798+
})
799+
this.enableTextEditor = true
800+
}
801+
},
802+
onKeydown(event) {
803+
if (this.enableTextEditor && event.key === 's' && event.ctrlKey) {
804+
this._textEditorClose()
805+
event.preventDefault()
806+
}
807+
},
808+
_textEditorClose() {
809+
Terminal.$api.textEditorClose(this.name)
810+
}
811+
}
812+
}
813+
</script>
814+
```
815+
754816
# About the author
755817

756818
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.

0 commit comments

Comments
 (0)