Log
日志组件是一个用来读取日志展示的组件, 支持实时刷新滚动, 底部锁定, 顶部锁定等功能。
<template>
<div>
<nly-row>
<nly-col>
<nly-log>
<nly-log-header title="job log">
<nly-log-tools>
<nly-button variant="outlineInfo" size="sm">
刷新
</nly-button>
</nly-log-tools>
</nly-log-header>
<nly-log-body scrollbar :transition="false">
<nly-log-line-tree
line="1"
duration="30"
text="init"
title="info"
icon="nlyfont nly-icon-arrow-bottom"
>
<nly-log-line line="-1" duration="20" text="测试" title="dsds" />
</nly-log-line-tree>
<nly-log-line
v-for="(item, index) in items"
:key="index"
:line="index"
:duration="item.duration"
:text="item.text"
:title="item.title"
/>
</nly-log-body>
</nly-log>
</nly-col>
</nly-row>
<nly-button @click="test" variant="info"> 添加日志看看效果 </nly-button>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
duration: '20s',
title: 'info',
icon: 'nlyfont nly-icon-arrow-bottom',
text:
'$ git clone --depth=50 --branch=[secure] https://github.com/[secure]/nly-adminlte-vue.git [secure]/nly-adminlte-vue',
},
],
}
},
methods: {
test() {
this.items.push({
duration: '20s',
title: 'info',
text:
'$ git clone --depth=50 --branch=[secure] https://github.com/[secure]/nly-adminlte-vue.git [secure]/nly-adminlte-vue',
})
},
},
}
</script>
<!-- nly-log.vue -->
组件参数
props 参数
props (Click to sort Ascending) | 类型 | 默认值 | 描述 |
---|---|---|---|
id | String | null | 设置id |
scroll-bottom | Boolean | true | 开启滚动到底部按钮 |
scroll-top | Boolean | true | 开启滚动到顶部按钮 |
log-body-class | String | log body 自定义css | |
pre-class | String | pre标签自定义css式样 | |
bottom-icon | String | 'nlyfont nly-icon-logo-ionic' | 滚动到底部按钮图标 |
bottom-text | String | '滚动到底部' | 滚动到底部按钮文字 |
lock-scroll-bottom | Boolean | true | 开启锁定到底部按钮 |
lock-bottom-icon | String | 'nlyfont nly-icon-logo-ionic' | 锁定底部按钮图标 |
lock-bottom-text | String | '锁定底部' | 锁定到底部按钮文字 |
top-icon | String | 'nlyfont nly-icon-logo-aperture' | 滚动到顶部按钮图标 |
top-text | String | 'Top' |
props 参数
props (Click to sort Ascending) | 类型 | 默认值 | 描述 |
---|---|---|---|
duration | String | 时间,传入会渲染time组件 | |
duration-class | String | time组件自定义css | |
line | String or Number | log行数 | |
line-class | String | log行数自定义css | |
text | String | log内容 | |
text-class | String | log内容自定义css | |
title | String | log内容标题 | |
title-class | String | log内容标题自定义css | |
icon | String | log内容前面的icon图标 | |
icon-class | String | log内容icon自定义css | |
log-line-class | String | log自定义css | |
high-light | Boolean | false | 高亮 |
tag | String | 'div' | 标签 |
props 参数
props (Click to sort Ascending) | 类型 | 默认值 | 描述 |
---|---|---|---|
id | String | null | 设置id |
duration | String | 时间,传入会渲染time组件 | |
duration-class | String | time组件自定义css | |
line | String | log行数 | |
line-class | String | log行数自定义css | |
text | String | log内容 | |
text-class | String | log内容自定义css | |
title | String | log内容标题 | |
title-class | String | log内容标题自定义css | |
icon | String | 'nlyfont nly-icon-arrow-bottom' | log内容前面的icon图标 |
icon-class | String | log内容icon自定义css | |
visible v-model | Boolean | false | 默认收起折叠后log,设置true会打开 |
log-line-class | String | log自定义css | |
high-light | Boolean | false | 高亮 |
单个组件导入
你可以从下表给出的导出路径和导出名称导入单个组件包
组件 | 导出名称 | 导出路径 |
---|---|---|
<nly-log> | NlyLog | nly-adminlte-vue |
<nly-log-header> | NlyLogHeader | nly-adminlte-vue |
<nly-log-body> | NlyLogBody | nly-adminlte-vue |
<nly-log-line> | NlyLogLine | nly-adminlte-vue |
<nly-log-line-tree> | NlyLogLineTree | nly-adminlte-vue |
<nly-log-tools> | NlyLogTools | nly-adminlte-vue |
例子
import { NlyLog } from 'nly-adminlte-vue' Vue.component('nly-log', NlyLog)
导出作为插件
导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.
导出名称 | 导出路径 |
---|---|
LogPlugin | nly-adminlte-vue |
例子
import { LogPlugin } from 'nly-adminlte-vue' Vue.use(LogPlugin)