动态适配 web 终端的尺寸

使Xterminal组件自适应容器

通过 xtermjs 所创建的终端大小是由cols、rows这两个配置项的来决定，虽然你可以通过 CSS 样式来让其产生自适应效果，但是这种情况下字体会变得模糊变形等、会出现一系列的问题，要解决这个问题我们还是需要使用cols、rows这两个值来动态设置。

红色部分则是通过cols和rows属性控制，我们可以很明显的看到该终端组件并没有继承父元素的宽度以及高度，而实际的宽度则是通过cols、rows两个属性控制的。

如何动态设置cols和rows这两个参数。

我们去看官方官方文档的时候，会注意到，官方有提供几个插件供我们使用。

而xterm-addon-fit: 可以帮助我们来让 web 终端实现宽度自适应容器。目前的话行数还不行，暂时没有找到好的替代方案，需要动态的计算出来，关于如何计算可以参数 vscode 官方的实现方案。

引入xterm-addon-fit，在我们的案例中，加入下面这两行：

动态计算行数

想要动态计算出行数的话，就需要获取到一个dom元素的高度：

动态计算尺寸的方法。

const terminalReact: null | HTMLDivElement = terminalRef.current // 100% * 100%

const xtermHelperReact: DOMRect | undefined = terminalReact?.querySelector(".xterm-helper-textarea")!.getBoundingClientRect()

const parentTerminalRect = terminalReact?.getBoundingClientRect()

const rows = Math.floor((parentTerminalRect ? parentTerminalRect.height : 20) / (xtermHelperReact ? xtermHelperReact.height : 1))

const cols = Math.floor((parentTerminalRect ? parentTerminalRect.width : 20) / (xtermHelperReact ? xtermHelperReact.width : 1))

// 调用resize方法，重新设置大小

termRef.current.resize(cols, rows)

复制代码

我们可以考虑封装成一个函数，只要父亲组件的大小发生变化，就动态适配一次。