使用flex布局,将xterm4.0终端铺满全屏

vue xterm

字数统计: 532阅读时长: 2 min

 2021/09/15   Share

前言

在使用xterm4.0版本的时候出现了一个问题, 就是原本3.0中的fullscreen接口在4.0中取消了, 找了好久也没看到4.0版本到底如何去撑满全屏。最开始我是在公司开发, 屏幕是1080分辨率, 我就按照1080来调试了行数, 做了一个伪全屏, 当我回家开发的时候,却发现在4k分辨率下, 只有一半屏幕是终端.没办法只能改掉.

使用flex进行弹性布局.

在新版本有一个插件, 会自动让终端撑满元素, 也就是说我们不需要去在init终端的时候设置row和col,只需要调整html元素即可.

1
2
3

const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
fitAddon.fit();

HTML

<template>
  <div style="height: 100%;">
    <section style="height: 100%;">
      <div>
        <span>
          {{ hostObj.business }}| {{ hostObj.username }}@<span v-if="hostObj.use_ip === 1">{{ hostObj.innerIP }}</span><span v-else>{{ hostObj.publicIP }}</span>:{{ hostObj.port }}
        </span>
        <el-button
          type="primary"
          style="position: absolute; right: 30px;"
          @click="openFileManager"
        >文件管理器</el-button>
      </div>
      <div id="terminal" />

    </section>

    <el-drawer
      title="文件管理器"
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
    >
      <file-manager :id="id" />
    </el-drawer>
  </div>

</template>

CSS

<style scoped>
section {
  display: flex;
  flex-direction: column;
  /* 这里背景设置为全黑, 因为终端全屏以后会留下一个小空间, 多设置一行就超出, 所以背景为黑色消除违和感 */
  background-color: #000;
}

/* 顶部header的样式 */
section div:nth-child(1) {
  height: 46px;
  // 不设置最小高度, 上下拖动的时候会被压缩
  min-height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e6f7ff;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}

/* 终端的样式 */
section div:nth-child(2) {
  padding-left: 5px;
  flex: 1;
}
</style>

总结

我们将父元素高度设置为100%, 并且启用flex布局, 主轴的方向改为column, 设置header固定高度, 并将终端设置flex=1让他吃满剩余空间.

原文作者：Momo

原文链接：https://mo.xmomo521.top/2021/09/15/使用flex布局-将xterm4-0终端铺满全屏/

发表日期：September 15th 2021, 4:15:03 pm

更新日期：December 21st 2021, 3:32:58 pm

Next Post

重写element-ui upload方法使用axios发送文件
Previous Post

使用python将URL参数解析为字典

CATALOG

1. 前言
2. 使用flex进行弹性布局.
1. 2.1. HTML
2. 2.2. CSS
3. 总结

