通过element写一个控制台展示复制功能

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

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

是控制台输出区域的外层容器，style="flex-grow: 1;"表示该容器的高度可以自适应。

是控制台输出区域的内层容器，用于设置样式。

是控制台输出文本区域的容器，ref="consoleOutput"表示该元素可以在Vue实例中通过this.$refs.consoleOutput访问到，v-html="console_output"表示该元素显示的文本内容由Vue实例中的console_output变量决定。

是复制按钮的容器。

引入复制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;
}