<el-col :span="12">
  <!-- 控制台输出区域,高度自适应 -->
  <div  style="flex-grow: 1;">
    <div >
      <div class="item-text-wrapper">
        <!-- 复制按钮 -->
        <div class="btn-copy-wrapper">
          <!-- 点击复制按钮,复制控制台输出文本 -->
          <button  data-clipboard-target=".item-text" @click="copyText">复制</button>
        </div>
        <!-- 控制台输出文本区域 -->
        <div  ref="consoleOutput" v-html="console_output"></div>
      </div>
    </div>
  </div>
</el-col>

以上是HTML代码,主要是控制台输出区域的布局,包含一个控制台输出文本区域和一个复制按钮,点击复制按钮可以将控制台输出的文本内容复制到剪贴板中。
这段代码是Vue.js的模板语法,用于渲染控制台输出区域的HTML结构。其中,:span="12"是一个动态绑定的属性,表示该元素占用12个格子的宽度。


是复制按钮的容器。


引入复制js文件
import ClipboardJS from 'clipboard';
mounted() {
  // 初始化剪贴板功能
  new ClipboardJS('.btn-copy');
  // 监听控制台输出区域高度变化
  const observer = new ResizeObserver(entries => {
    for (const entry of entries) {
      if (entry.target === this.$refs.consoleOutput) {
        // 动态设置控制台输出区域的高度
        this.$refs.consoleOutputWrapper.style.height = `${entry.contentRect.height}px`;
      }
    }
  });
  observer.observe(this.$refs.consoleOutput);
},

这段代码是Vue.js组件中的JavaScript代码,包括了两个部分:mounted()函数和样式定义。mounted()函数是Vue.js组件的生命周期函数之一,在组件挂载到DOM之后执行。这个函数中的代码主要包括了两个功能:初始化剪贴板功能和监听控制台输出区域高度变化。其中,new ClipboardJS(‘.btn-copy’)是初始化剪贴板功能,表示将.btn-copy类的元素绑定为可以复制的对象。const observer = new ResizeObserver(entries => {…})是监听控制台输出区域高度变化的代码,ResizeObserver是一个用于监听元素尺寸变化的内置对象,entries是一个尺寸变化的数组,其中包含了所有变化的元素。在这段代码中,我们遍历了entries数组,判断其中的元素是否是控制台输出区域的元素,如果是,则动态设置控制台输出区域的高度
控制台样式部分

style样式部分
/* 控制台输出区域样式 */
.console-output {
  // 控制台输出区域的背景色
  background-color: #f5f5f5;
  // 控制台输出区域的内边距
  padding: 10px;
  // 控制台输出区域的圆角
  border-radius: 4px;
  // 控制台输出区域的溢出处理方式
  overflow: auto;
  // 控制台输出区域的高度
  height: auto;
}
.well {
  // 控制台输出区域的边框
  position: relative;
}
.btn-copy-wrapper {
  // 复制按钮的位置:相对于控制台输出区域
  position: absolute;
  // 复制按钮的顶部位置
  top: -30px;
  // 复制按钮的右侧位置
  right: 0;
  // 复制按钮的内边距
  padding: 5px 10px;
}
.btn-copy {
  // 复制按钮的边框
  border: none;
  // 复制按钮的背景色
  background-color: #ddd;
  // 复制按钮的文字颜色
  color: #333;
  // 鼠标悬停时的指针样式
  cursor: pointer;
  // 复制按钮的圆角
  border-radius: 4px;
}
.item-text-wrapper {
  // 控制台输出文本区域的外边距
  margin-top: 30px;
}
.item-text {
  // 控制台输出文本区域的字体
  font-family: Consolas, "Courier New", monospace;
  // 控制台输出文本区域的字号
  font-size: 14px;
  // 控制台输出文本区域的行高
  line-height: 1.5;
  // 控制台输出文本区域的换行方式
  white-space: pre-wrap;
  // 控制台输出文本区域的单词断行方式
  word-break: break-all;
}