lilonglong/magic-api-gitee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复日志组件溢出时未显示滚动条的问题

Browse Source
This commit is contained in:
mxd 2021-12-22 23:18:12 +08:00
parent 7bec83e092
commit 5abb726e4c
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
magic-editor/src/console/src/components/layout/magic-log.vue
View File

@ -1,10 +1,12 @@
<template>
<div ref="container" class="ma-log" @contextmenu.prevent="e=>onContextMenu(e)">
<div v-for="(item, key) in logs" :class="{ multiple: item.multiple, more: item.showMore }" :key="'run_log_' + key">
<pre v-html="item.html"></pre>
<span v-if="item.multiple" class="multiple" @click="item.showMore = !item.showMore">
<div class="ma-log-wrapper" @contextmenu.prevent="e=>onContextMenu(e)">
<div ref="container" class="ma-log">
<div v-for="(item, key) in logs" :class="{ multiple: item.multiple, more: item.showMore }" :key="'run_log_' + key">
<pre v-html="item.html"></pre>
<span v-if="item.multiple" class="multiple" @click="item.showMore = !item.showMore">
{{ item.showMore ? '点击隐藏多行日志' : `有 ${item.lines} 行日志被隐藏 点击显示`}}
</span>
</div>
</div>
</div>
</template>
@ -64,13 +66,18 @@ export default {
</script>
<style scoped>
.ma-log {
.ma-log-wrapper{
position: relative;
overflow: auto;
font-size: 13.5px;
width: 100%;
height: 100%;
background: var(--run-log-background);
padding-top: 5px;
padding-left: 5px;
padding: 5px;
}
.ma-log {
position: absolute;
font-size: 13.5px;
height: 100%;
}
.ma-log > div pre{