<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;
}