通过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个格子的宽度。

引入复制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数组，判断其中的元素是否是控制台输出区域的元素，如果是，则动态设置控制台输出区域的高度 控制台样式部分