Coder Social home page Coder Social logo

希望支持ts about vue-web-terminal HOT 10 CLOSED

tzfun avatar tzfun commented on July 20, 2024
希望支持ts

from vue-web-terminal.

Comments (10)

tzfun avatar tzfun commented on July 20, 2024

对于ts支持的问题已经在 #18 回复了。vite配置支持compile with browser side就可以,如果是compile with server side无法通过编译,因为插件内部用到了浏览器window相关接口,与Nuxt类似,在 #3 回复了Nuxt的处理办法。

另外,我是服务端Coder对前端用的ts玩的不是很溜,如果你有意改造ts可以自建分支改造然后提交PR。

from vue-web-terminal.

birdmanmandbir avatar birdmanmandbir commented on July 20, 2024

对于ts支持的问题已经在 #18 回复了。vite配置支持compile with browser side就可以,如果是compile with server side无法通过编译,因为插件内部用到了浏览器window相关接口,与Nuxt类似,在 #3 回复了Nuxt的处理办法。

另外,我是服务端Coder对前端用的ts玩的不是很溜,如果你有意改造ts可以自建分支改造然后提交PR。

ok, 这周看看有没有空开搞
热更新导致白屏的问题我猜可以通过onUnmounted时候销毁来实现, 我看看是不是这个问题

from vue-web-terminal.

tzfun avatar tzfun commented on July 20, 2024

unmounted勾子也加了的,在vue3分支 /src/Terminal.js#L365

from vue-web-terminal.

birdmanmandbir avatar birdmanmandbir commented on July 20, 2024

unmounted勾子也加了的,在vue3分支 /src/Terminal.js#L365

噢噢, 还想问下,codemirror和highlightjs通过use时候传option实现, 是有啥特殊考虑吗,能不能通过props传入

from vue-web-terminal.

birdmanmandbir avatar birdmanmandbir commented on July 20, 2024

开了一个重构todo
#20

from vue-web-terminal.

tzfun avatar tzfun commented on July 20, 2024

噢噢, 还想问下,codemirror和highlightjs通过use时候传option实现, 是有啥特殊考虑吗,能不能通过props传入

当时是为了通过打包,因为有未定义的标签打包会出问题,不知道vue-cli能从哪里可以忽略掉这个检查,才这样做的,如果有其他更好的办法解决当然props更好一点

from vue-web-terminal.

birdmanmandbir avatar birdmanmandbir commented on July 20, 2024

当时是为了通过打包,因为有未定义的标签打包会出问题,不知道vue-cli能从哪里可以忽略掉这个检查,才这样做的,如果有其他更好的办法解决当然props更好一点

是不是就让外部通过slot实现就好了, vue-web-terminal内部不依赖highlightjs和codemirror两个组件, 这样也灵活一点
类似这样:
使用插槽插入模板(vue3):

<Terminal>
  <template #code="message">
    <highlightjs ref="highlightjs" autodetect :code="message.content" />
  </template>
</Terminal>
<Terminal>
  <template #code="message">
    <codemirror :value="message.content" :options="yourCodemirrorOptions" />
  </template>
</Terminal>

还想问下vue-web-terminal在线体验那个代码在哪里呢, 想试下这两天改的有没有问题(改的还挺多的, 不过尽量保持了功能不变)

from vue-web-terminal.

birdmanmandbir avatar birdmanmandbir commented on July 20, 2024

tabKeyHandler这个事件和其他的实现方式不一样,如果有tabKeyHandler就不执行fillCmd了,是什么原因呢

  if (isActive()) {
    if (cursorConf.show) {
      if (event.key.toLowerCase() === "tab") {
        if (!props.tabKeyHandler) {
          fillCmd();
        } else {
          props.tabKeyHandler(event);
        }
        event.preventDefault();
      } else if (document.activeElement !== cmdInput.value) {
        cmdInput.value?.focus();
      }
    }

from vue-web-terminal.

tzfun avatar tzfun commented on July 20, 2024

当时是为了通过打包,因为有未定义的标签打包会出问题,不知道vue-cli能从哪里可以忽略掉这个检查,才这样做的,如果有其他更好的办法解决当然props更好一点

是不是就让外部通过slot实现就好了, vue-web-terminal内部不依赖highlightjs和codemirror两个组件, 这样也灵活一点 类似这样: 使用插槽插入模板(vue3):

还想问下vue-web-terminal在线体验那个代码在哪里呢, 想试下这两天改的有没有问题(改的还挺多的, 不过尽量保持了功能不变)

用slot也可以其实,不在插件内部依赖更方便一点,vue3分支你先这样改吧,vue2分支我空了改一下。在线体验代码在demo分支,不过是vue2版本的,你可以建一个demo-vue3分支测试。

from vue-web-terminal.

tzfun avatar tzfun commented on July 20, 2024

tabKeyHandler这个事件和其他的实现方式不一样,如果有tabKeyHandler就不执行fillCmd了,是什么原因呢

是因为tabKeyHandler的作用就是替代插件自带的命令提示功能,结合命令提示的slot让使用者自己实现命令提示,比如:自定义实现按下tab键之后从服务端拿取命令名自动填充

from vue-web-terminal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.