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类型默认值描述
tag
String'div'标签
log-class
Stringlog自定义css
container-class
String容器自定义css
container-tag
String'div'容器tag

props 参数

props类型默认值描述
title
Stringtitle内容
title-class
Stringtitle自定义css
log-header-class
Stringheader自定义css
tag
String'div'标签
title-tag
String'div'title tag

<nly-log-body>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
scroll-bottom
Booleantrue开启滚动到底部按钮
scroll-top
Booleantrue开启滚动到顶部按钮
log-body-class
Stringlog body 自定义css
pre-class
Stringpre标签自定义css式样
bottom-icon
String'nlyfont nly-icon-logo-ionic'滚动到底部按钮图标
bottom-text
String'滚动到底部'滚动到底部按钮文字
lock-scroll-bottom
Booleantrue开启锁定到底部按钮
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
Stringtime组件自定义css
line
String or Numberlog行数
line-class
Stringlog行数自定义css
text
Stringlog内容
text-class
Stringlog内容自定义css
title
Stringlog内容标题
title-class
Stringlog内容标题自定义css
icon
Stringlog内容前面的icon图标
icon-class
Stringlog内容icon自定义css
log-line-class
Stringlog自定义css
high-light
Booleanfalse高亮
tag
String'div'标签

<nly-log-line-tree>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
duration
String时间,传入会渲染time组件
duration-class
Stringtime组件自定义css
line
Stringlog行数
line-class
Stringlog行数自定义css
text
Stringlog内容
text-class
Stringlog内容自定义css
title
Stringlog内容标题
title-class
Stringlog内容标题自定义css
icon
String'nlyfont nly-icon-arrow-bottom'log内容前面的icon图标
icon-class
Stringlog内容icon自定义css
visible
v-model
Booleanfalse默认收起折叠后log,设置true会打开
log-line-class
Stringlog自定义css
high-light
Booleanfalse高亮

v-model

PropertyEvent
visibleinput

props 参数

props类型默认值描述
tag
String'div'标签
log-tools-class
String自定义css

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-log>NlyLognly-adminlte-vue
<nly-log-header>NlyLogHeadernly-adminlte-vue
<nly-log-body>NlyLogBodynly-adminlte-vue
<nly-log-line>NlyLogLinenly-adminlte-vue
<nly-log-line-tree>NlyLogLineTreenly-adminlte-vue
<nly-log-tools>NlyLogToolsnly-adminlte-vue

例子

import { NlyLog } from 'nly-adminlte-vue'
Vue.component('nly-log', NlyLog)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
LogPluginnly-adminlte-vue

例子

import { LogPlugin } from 'nly-adminlte-vue'
Vue.use(LogPlugin)