tzfun / vue-web-terminal Goto Github PK
View Code? Open in Web Editor NEWA beautiful web-side command line window plugin (simulating a terminal).
Home Page: https://tzfun.github.io/vue-web-terminal/
License: Apache License 2.0
A beautiful web-side command line window plugin (simulating a terminal).
Home Page: https://tzfun.github.io/vue-web-terminal/
License: Apache License 2.0
Bug描述
A clear and concise description of what the bug is.
复现步骤
Steps to reproduce the behavior:
截图
If applicable, add screenshots to help explain your problem.
复现环境:
详细描述
Add any other context about the problem here.
Feature or optimization description
Make callbacks to VueWebTerminal asynchronous
Applicable scene
If a terminal represents a shell on a remote machine then it's very hard to overwrite callbacks since they can't wait for an asynchronous request to be fulfiled.
#28 is a good example.
If autocomplete depends on files paths (i.e. in cat
command), then it shouldn't be necessary to send whole filesystem of the target computer to the browser just to implement autocomplete. If the search callback would be asynchronous, then it would be possible to just send the request and the VueWebTerminal would wait for the data to be ready.
用v-if控制组件 <Terminal v-if="flag" name="bbb" @OnClick="clickTerminal"/>,当点击关闭按钮
const clickTerminal=(key:string)=>{
if(key=='close'){
flag.value=false
}
}
然后重新创建组件,会报错 Uncaught (in promise) Error: Unable to register an existing terminal: bbb
at Object.o2 [as register] (vue-web-terminal.js:16:51058)
这是今天新创建的一个demo,只有helloWolrd的那种
目前会持续维护两个分支的版本号:2.xx和3.xx:
vue2
版本vue3
版本vue3
版本除安装方式以外其他用法与vue2
保持一致
// vue3安装
npm install [email protected] --save
main.js中安装
import Terminal from 'vue-web-terminal'
// for vue3
const app = createApp(App)
app.use(Terminal)
使用
<template>
<div id="app">
<terminal name="my-terminal" @execCmd="onExecCmd"></terminal>
</div>
</template>
<script>
import Terminal from "vue-web-terminal"
export default {
name: 'App',
components:{Terminal},
methods: {
onExecCmd(key, command, success, failed) {
// handle your command ...
}
}
}
</script>
<style>
body, html, #app {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
Feature or optimization description
Applicable scene
Bug description
A clear and concise description of what the bug is.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
If applicable, add screenshots to help explain your problem.
Reproduce environment:
Detailed Description
Add any other context about the problem here.
应该将TermialObj的方法等 includes到组件内
const terminal=this.$refs.terminal.pushMessage();
而不是目前这种,而不是全局的收集器,如果页面有大量的组件,光是起名字就挺麻烦的了
Feature or optimization description
Applicable scene
Bug description
I have given :show-header="false" in vue-web-terminal @2.1.10 but my whole terminal is hidden.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
<Terminal
name="my-terminal"
:context="'--'"
:title="''"
:show-header = "false"
:initLog = "initLog"
@exec-cmd="onExecCmd"
>
Reproduce environment:
Detailed Description
Add any other context about the problem here.
Bug description
A clear and concise description of what the bug is.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
If applicable, add screenshots to help explain your problem.
看着像是少了css-loader的依赖,比如node-sass
Reproduce environment:
Detailed Description
Add any other context about the problem here.
请问minScreen、fullScreen要重新写样式吗?还是可以直接调用方法更改样式呢?
Originally posted by @18030705033 in #2 (comment)
预计在下一个release版本支持拖拽功能,计划提供鼠标拖动header和api调用两种方式实现,敬情期待~
Bug description
A clear and concise description of what the bug is.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
If applicable, add screenshots to help explain your problem.
Reproduce environment:
Detailed Description
Add any other context about the problem here.
init-log 为 null 终端无法输入
Bug description
Once the context
prop changes on the terminal vue component, the feature of moving the cursor with arrow keys starts to malfunction. The result is that once that happens, the user is unable to reliably edit his currently typed command.
Steps to reproduce
Steps to reproduce the behavior:
context
prop so that it has different length than beforeReproduce environment:
Bug description
A clear and concise description of what the bug is.
Steps to reproduce
Steps to reproduce the behavior:
Reproduce environment:
Detailed Description
本地运行之后,初始化就报错
短时间内暂时无法完成Shell组件的开发,先在Terminal组件中支持ANSI控制码的过滤和颜色样式控制码转换
目标:
xterm-256color
颜色类ANSI控制码pushMessage
接口支持2.1.10版本,固定不了是啥情况,还想问下怎么禁止拖拽
<template>
<div>
<Terminal
name="my-terminal"
@exec-cmd="onCommand"
/>
</div>
</template>
<script>
import Terminal from "vue-web-terminal";
export default {
name: "FakeVirtualTerminal",
components: {
Terminal,
},
data() {
return {
};
},
methods: {
onCommand(key, command, success, failed) {
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: "成功",
content: command,
});
}
},
},
};
</script>
大佬,现在如果在终端输入内容,但是不执行,而是关闭终端,再次开启的时候我只有先execute() 然后将terminalLog清空,有没有啥方法可以直接初始化啊
Originally posted by @18030705033 in #2 (comment)
移除驼峰事件命名,改为中划线命名。
vue官方不推荐 emit 时用驼峰命名的事件,如下图,目前代码中几乎全是这种不规范的命名,因此将在下个版本全部改为中划线命名,为了兼容以前版本,驼峰命名的事件暂时保留,但在未来的版本中会将其移除!
届时移除后,对开发者们而言,@execCmd
这类事件绑定将不再生效,建议将其修改为@exec-cmd
格式。
如果你当前的写法为:
<terminal name="terminal"
@execCmd="onExecCmd"
@beforeExecCmd="beforeExecCmd">
建议修改为此类写法:
<terminal name="terminal"
@exec-cmd="onExecCmd"
@before-exec-cmd="beforeExecCmd">
Feature or optimization description
Currently it's hard to imitate a file editor because the input for the question answer is a standard HTML input. A text area would allow for a multiline-edition.
To better visualize the issue here's the current size of the input (marked with a red color):
It would also be neat to be able to pre-fill the input so that one could put there current content of a file.
Applicable scene
File editors
Bug description
官方样例中json深度下拉框无法点击
看控制台是因为多了一个click监听器,但看不出来是哪里附加的
Steps to reproduce
Steps to reproduce the behavior:
Reproduce environment:
Feature or optimization description
Applicable scene
点击全屏按钮报错:cannot read properties of undefined (reading 'requestFullscreen),最小化和关闭按钮没问题,前面做好的也不能用了
Originally posted by @18030705033 in #9 (comment)
用的2.1.10版本,在Flash未结束的时候,如果这时候失去焦点,onKeydown事件会失效。
本来想用onKeydown实现ctrl^c结束执行的功能,但是发现这个问题,请教
vue3 如何禁止输入中文呢
Originally posted by @18030705033 in #2 (comment)
目前已经支持了自定义输入过滤功能,通过定义inputFilter
函数来自定义过滤输入,支持版本:3.0.3+
以及2.0.4+
。
下面示例展示过滤中文的方法,其余场景规则可根据你的需求进行自定义实现。
<template>
<div id="app">
<terminal name="my-terminal" @execCmd="onExecCmd" :inputFilter="inputFilter"></terminal>
</div>
</template>
<script>
import Terminal from 'vue-web-terminal'
export default {
name: 'App',
components: {Terminal},
setup() {
},
methods: {
onExecCmd(key, command, success, failed) {
// 省略命令执行逻辑...
},
inputFilter(data, value, e) {
console.log(data, value, e)
return value.replace(/[\u4e00-\u9fa5]/g, "")
}
}
}
</script>
增加一个消息输出到控制台之前的回调函数,类似于如下
<template>
<Terminal :before-push="beforePush" />
</template>
<script lang='ts' setup>
import Terminal from "vue-web-terminal"
const beforePush = (name, msg) => {
}
</script>
无论是主动push还是命令执行结果都应该走这个回调
Bug description
A clear and concise description of what the bug is.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
If applicable, add screenshots to help explain your problem.
Reproduce environment:
Detailed Description
Add any other context about the problem here.
当前Document存在多个Terminal实例时,拖拽效果只会作用在一个实例上
Feature or optimization description
希望支持ts; 另外vue3分支的是不是可以切到vite
Applicable scene
Feature or optimization description
官网使用vitepress改造
Applicable scene
对于各种使用场景、api用法展示效果更好
支持修改name
属性
在多窗口场景下为了方便管理多个Terminal实例,需要动态修改实例的name
属性,目前版本暂不支持。
初始化之后光标的起始位置就固定了,虽然可以修改context,但是修改完之后,再按方向左键或者Home键光标的位置与实际的输入位置无法对齐
Bug description
Unable to copy value from table form of data.
Steps to reproduce
Steps to reproduce the behavior:
Screenshot
If applicable, add screenshots to help explain your problem.
Reproduce environment:
Detailed Description
Add any other context about the problem here.
请问目前是不是不支持websocket方式实时与后端进行交互,数据全部由后端进行提供
使用方向上键获取上一条命令并执行之后,再次按上键获取不到这一条命令,而是这条命令的前一条
再次执行前一条命令的时候会出现这个情况,如果多按几次上键执行更早之前的命令则不会有这问题
当依次执行 command1 command2 command3之后
按压方向上键获取到command3并执行之后
再次按方向上键此时输入的是command2,而并不是command3,命令历史的位置没有重置
命令历史列表依然是command1,command2,command3
当历史命令只有一条时,重复上面过程,第二次获取不到命令,需要先按下键再按上键才能获取
当依次执行 command1 command2 command3之后
按压两次方向上键获取到command2并执行之后
再次按方向上键此时输入的是command2,是正常的
此时命令历史列表是command1,command2,command3,command2
建议在每一次执行后,都重置一下命令执行历史列表当前的下标
因为我是模拟了一个ssh控制台,需要在初始化的时候直接输入密码的。
还有个问题就是,为什么我使用ask会提示
$Ask is not a constructor
代码如下:
import Terminal from 'vue-web-terminal'
onExecCmd(key, command, success, failed) {
let asker = new Terminal.$Ask()
success(asker)
asker.ask({
question: 'Please input github username: ',
autoReview: true,
callback: value => {
console.log(value)
asker.ask({
question: 'Please input github password: ',
autoReview: true,
isPassword: true,
callback: () => {
// do something
asker.finish()
}
})
}
})
请问有支持vue3的计划吗
context有特殊字符<>转义显示回车保存后未转义
Feature or optimization description
Applicable scene
Feature or optimization description
I can't see a way to write own autocomplete. 🤔
I can't find any event/callback that would let me do my own search. The tabKeyHandler
example in the docs is limited to limits replacing the helpCmd
, which isn't really the case I'm speaking of.
I've tried to find some workarounds like changing command-store
prop when the Tab is being pressed, but looks like this property is ignored after the terminal is mounted.
Applicable scene
Current system for autocomplete looks smooth for commands, but not their arguments. Let's assume that we have a command some-command <path>
. I won't be able to autocomplete path, which quickly gets tedious when commands like cd
get to be used quite often.
PS:
Thank you @tzfun for the amazing piece of software, that you've created. It really fills a neat niche.
Feature or optimization description
建议增加动态修改窗口大小的功能。
Applicable scene
将其嵌入在分割页面中的其中一个页面,希望其能够跟随分割页面长宽变化。
Hi there.
How I could get support for nuxt3?
I try to register client-side plugin for nuxt3 (because clint&server-side plugin get error about document is not defined) and use your code example, but I fail:
Maybe you could help? 👀
计划在2.2.x
和3.2.x
版本新增Shell组件,保留和Terminal共有的全屏、拖拽外围功能,其内部控制台显示区域将重新实现,计划支持ANSI的部分样式和光标定位规则,输入输出可直接接入SSH,无需再做字符过滤。
此版本计划对现有代码进行优化重构,对现有的Terminal组件和API调用在使用方法上有较大调整,升级此版本需要修改对应的使用方式,后面会在文档中说明。
关于Shell组件更多你所期待或需求的功能可在此issue留言~
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.