Skip to content

Commit e190e72

Browse files
tzfuntzfun
committed
[vue2] feat 优化一些逻辑
1 parent 38602d7 commit e190e72

File tree

8 files changed

+176
-127
lines changed

8 files changed

+176
-127
lines changed

‎README.md

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
# vue-web-terminal
88

99
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue2"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue2"></a>
10-
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3-pioneer"></a>
10+
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3"></a>
1111
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://shields.io/bundlephobia/minzip/vue-web-terminal"></a>
1212
<a href="https://npmcharts.com/compare/vue-web-terminal?minimal=true"><img src="https://img.shields.io/npm/dt/vue-web-terminal.svg" alt="Downloads"></a>
1313
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://img.shields.io/npm/l/vue-web-terminal.svg" alt="Version"></a>
@@ -34,8 +34,8 @@ A web-side command line plugin built by `Vue`, supports multiple message formats
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.
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
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
3939
> hand it over to the developer to implement and execute. After that, hand it over to show it to the user
4040
4141
# Online Experience
@@ -46,7 +46,7 @@ Demo：[https://tzfun.github.io/vue-web-terminal/](https://tzfun.github.io/vue-w
4646

4747
# Quick Start
4848

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

5252
```shell
@@ -61,6 +61,9 @@ Use Terminal plugin in `main.js`
6161

6262
```js
6363
import Terminal from 'vue-web-terminal'
64+
// This style needs to be introduced in versions after 3.1.8 and 2.1.12.
65+
// There is no need to introduce theme styles in previous versions.
66+
import 'vue-web-terminal/lib/theme/dark.css'
6467

6568
// for vue2
6669
Vue.use(Terminal)
@@ -126,6 +129,7 @@ Terminal tag supports attribute parameter table.
126129
|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|--------------------------------------------------|
127130
| name | Terminal instance name, the name of the same vue instance must be unique, this value is also used in API. | string | terminal |
128131
| context | Context text. | string | /vue-web-terminal |
132+
| context-suffix | Context text suffix. | string | \> |
129133
| title | The title displayed in the header. | string | vue-web-terminal |
130134
| 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 |
131135
| init-log | The log displayed when Terminal is initialized. It is an array composed of [Message](#Message), `null` is not displayed. | array | / |
@@ -141,7 +145,7 @@ Terminal tag supports attribute parameter table.
141145
| search-handler | User-defined command search prompt implementation, the callback needs to resolve a command object, the specific format see [Command Definition format](#Command), can be used with `helpCmd` this slot | function | function(commandStore, key, callback) |
142146
| scroll-mode | Scroll bar mode. | string | smooth |
143147
| push-message-before | A hook function that fires before the push message is displayed. | function | function(message, name) |
144-
148+
| log-size-limit | Limit the maximum number of displayed logs | number | 200 |
145149
> Below are the removed properties
146150
>
147151
> * ~~**show-log-time**~~: Removed after `2.0.14` and `3.0.13` versions.
@@ -291,6 +295,16 @@ let messages = [
291295
TerminalApi.pushMessage(name, messages)
292296
```
293297

298+
### appendMessage()
299+
300+
> Newly added in version `3.2.0`
301+
302+
Append content to the last message. It will be appended only if the last message exists and its type is normal, ansi, code, html, otherwise push a new message.
303+
304+
```js
305+
TerminalApi.appendMessage('my-terminal', "this is append content")
306+
```
307+
294308
### fullscreen()
295309

296310
Make the current terminal enter or exit full screen.
@@ -381,9 +395,9 @@ TerminalApi.textEditorOpen('my-terminal', {
381395
})
382396
```
383397

384-
`content` is the preset content when opening the editor. If you don’t want to preset any content, you can leave this
385-
parameter blank. When the user clicks Close or actively calls the `textEditorClose()` method, the `onClose` callback
386-
will be triggered, and the parameter `value` is the text content in the current editor,
398+
`content` is the preset content when opening the editor. If you don’t want to preset any content, you can leave this
399+
parameter blank. When the user clicks Close or actively calls the `textEditorClose()` method, the `onClose` callback
400+
will be triggered, and the parameter `value` is the text content in the current editor,
387401
`options` is the parameter passed in when closing.
388402

389403
For more information on how to use text editors, see [Text Editor](#TextEditor).
@@ -914,6 +928,7 @@ This plugin is completely open source and free, and it is not easy to create. If
914928

915929
Thank you for your donation:
916930
* [zhangpeng1314](https://gitee.com/zhangpeng1314) - ￥150
931+
* [lilqilie](https://github.com/lilqilie) - ￥20
917932

918933
# License
919934

‎README_ZH.md

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
# vue-web-terminal
88

99
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue2"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue2"></a>
10-
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3-pioneer"></a>
10+
<a href="https://github.com/tzfun/vue-web-terminal/tree/vue3"><img src="https://shields.io/github/package-json/v/tzfun/vue-web-terminal/vue3"></a>
1111
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://shields.io/bundlephobia/minzip/vue-web-terminal"></a>
1212
<a href="https://npmcharts.com/compare/vue-web-terminal?minimal=true"><img src="https://img.shields.io/npm/dt/vue-web-terminal.svg" alt="Downloads"></a>
1313
<a href="https://www.npmjs.com/package/vue-web-terminal"><img src="https://img.shields.io/npm/l/vue-web-terminal.svg" alt="Version"></a>
@@ -60,6 +60,8 @@ main.js中载入 Terminal 插件
6060

6161
```js
6262
import Terminal from 'vue-web-terminal'
63+
// 3.1.8 以后以及 2.1.12 以后版本需要引入此样式，之前版本无需引入主题样式
64+
import 'vue-web-terminal/lib/theme/dark.css'
6365

6466
// for vue2
6567
Vue.use(Terminal)
@@ -79,38 +81,38 @@ const app = createApp(App).use(Terminal)
7981
</template>
8082
8183
<script>
82-
import Terminal from "vue-web-terminal"
83-
84-
export default {
85-
name: 'App',
86-
components: {Terminal},
87-
methods: {
88-
onExecCmd(key, command, success, failed) {
89-
if (key === 'fail') {
90-
failed('Something wrong!!!')
91-
} else {
92-
let allClass = ['success', 'error', 'system', 'info', 'warning'];
93-
94-
let clazz = allClass[Math.floor(Math.random() * allClass.length)];
95-
success({
96-
type: 'normal',
97-
class: clazz,
98-
tag: '成功',
99-
content: command
100-
})
84+
import Terminal from "vue-web-terminal"
85+
86+
export default {
87+
name: 'App',
88+
components: {Terminal},
89+
methods: {
90+
onExecCmd(key, command, success, failed) {
91+
if (key === 'fail') {
92+
failed('Something wrong!!!')
93+
} else {
94+
let allClass = ['success', 'error', 'system', 'info', 'warning'];
95+
96+
let clazz = allClass[Math.floor(Math.random() * allClass.length)];
97+
success({
98+
type: 'normal',
99+
class: clazz,
100+
tag: '成功',
101+
content: command
102+
})
103+
}
101104
}
102105
}
103106
}
104-
}
105107
</script>
106108
107109
<style>
108-
body, html, #app {
109-
margin: 0;
110-
padding: 0;
111-
width: 100%;
112-
height: 100%;
113-
}
110+
body, html, #app {
111+
margin: 0;
112+
padding: 0;
113+
width: 100%;
114+
height: 100%;
115+
}
114116
</style>
115117
```
116118

@@ -124,6 +126,7 @@ terminal标签支持的属性参数表
124126
|----------------------|---------------------------------------------------------------------------|----------|--------------------------------------------------|
125127
| name | Terminal实例名称，同一页面的name必须唯一，API中使用也需用到此值 | string | terminal |
126128
| context | 上下文内容 | string | /vue-web-terminal |
129+
| context-suffix | 上下文后缀符号 | string | \> |
127130
| title | 窗口头部显示的标题 | string | vue-web-terminal |
128131
| show-header | 是否显示窗口头部，此开关会影响[拖拽功能](#拖拽功能)，只有显示头部才能使用默认提供的拖拽功能 | boolean | true |
129132
| init-log | Terminal初始化时显示的日志，是由[消息对象](#消息对象)组成的数组，设为`null`则不显示 | array | 略 |
@@ -139,6 +142,7 @@ terminal标签支持的属性参数表
139142
| search-handler | 用户自定义命令搜索提示实现，callback需接收一个命令对象，具体格式见[命令定义格式](#命令定义)，可配合`helpCmd`这个slot使用 | function | function(commandStore, key, callback) |
140143
| scroll-mode | 滚动条模式 | string | smooth |
141144
| push-message-before | 在推送消息显示之前触发的钩子函数 | function | function(message, name) |
145+
| log-size-limit | 限制显示日志的最大条数 | number | 200 |
142146

143147
> 下面是已移除属性
144148
>
@@ -171,7 +175,7 @@ terminal标签支持的事件表
171175
* 传入一个`TerminalAsk`对象，将会进入[用户询问输入](#用户询问输入)处理逻辑，本次执行并不会结束，直到调用`finish()`
172176

173177
> 注意：
174-
>
178+
>
175179
> 从`2.1.7`和`3.1.3`版本开始，事件的驼峰命名被移除，如果你的版本是在这之后，请使用中划线命名，比如`@exec-cmd="onExecCmd"`
176180
> [issue#41](https://github.com/tzfun/vue-web-terminal/issues/41)
177181
@@ -288,6 +292,16 @@ let messages = [
288292
TerminalApi.pushMessage('my-terminal', messages)
289293
```
290294

295+
### appendMessage()
296+
297+
> `3.2.0`版本新增
298+
299+
向最后一条消息追加内容。仅当最后一条消息存在，且其 type 为 normal、ansi、code、html时才会追加，否则 push 一条新消息。
300+
301+
```js
302+
TerminalApi.appendMessage('my-terminal', "this is append content")
303+
```
304+
291305
### fullscreen()
292306

293307
使当前terminal进入或退出全屏
@@ -855,7 +869,7 @@ TerminalApi.textEditorOpen('my-terminal', {
855869
<button class="t-text-editor-floor-btn" @click="_textEditorClose(false)">Cancel</button>
856870
<button class="t-text-editor-floor-btn" @click="_textEditorClose(true)">Save & Close</button>
857871
</div>
858-
872+
859873
</template>
860874
</terminal>
861875
</template>
@@ -927,6 +941,7 @@ export default {
927941
感谢大佬的捐赠：
928942

929943
* [zhangpeng1314](https://gitee.com/zhangpeng1314) - 150元
944+
* [lilqilie](https://github.com/lilqilie) - 20元
930945

931946
# License
932947

0 commit comments

Comments
 (0)