继续创作，加速生长！这是我参加「日新计划 10 月更文挑战」的第29天，点击查看活动详情
使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)
咱们能够考虑封装成一个函数，只要父亲组件的巨细发生变化，就动态适配一次。
