Vue 中数据流组件

Posted 2021-02-05 zgh-blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 中数据流组件相关的知识，希望对你有一定的参考价值。

好久不见呀，这两年写了很多很多东西，也学到很多很多东西，没有时常分享是因为大多都是我独自思考。明年我想出去与更多的大神交流，再修筑自己构建的内容。

　有时候我会想：我们遇到的问题，碰到的界限，是别人给的还是我们自己给的？其实我觉得自己选择的方向是对的，但是有时难免会怀疑，是否有人和我在做一样的事情，我希望找到有趣的伙伴，做一些有趣的事情。

Vue 中数据流组件

　　又将年终了，该做年终总结了呀。。最近花了一些时间，升级了一下我们的技术架构，使用 vue 作为我们的框架。延续传统，我们仍然需要开发一些 java ，所以将 vue 项目集成进了 springboo, 实现了一些便利的如协作开发前后端，命令编译，简洁的打包部署, router 和 axios 交互问题。写了一个项目示例，有兴趣的可以了解(欢迎 start 呀!): Vue + SpringBoot 项目示例。

　　引子: 最近写了一个项目，设计了一些基础组件。在开发过程中，也发现了一些最初没有想到的，但可以作为基础组件使用的内容。而数据流刚好就是其中一个。因为很早之前写过一个，只不过那个是原生的，这个使用了 vue 和 elementUI, scss。

重要提示

1. 技术的提升，并没有意味着 UI 的提升，所以我很抱歉，比起之前没有更好看。所以你们使用要先找UI优化样式。又一次叹息，UI的重要性。没有一个好的UI伙伴，在只关注美的人看来，一身武功，自降7分。以后要结识一个呀！
2. 因为之前写过，所以兴致来了就又写了一下基于 vue 的实现。

功能

1. 样式增加了主题设置，目前只有日志和报警，可以扩展主题(比较简单就可以实现扩展)。
2. 增加了日志分类，如时间，级别，概要(比较简单可以扩展为你所需要的)。

代码才是最重要的吧

<template>
  <div>
    <div :id="theme" class="stream-wrapper">
      <el-table
        :data="table.data"
        stripe
        show-summary
        sum-text="统计"
        :summary-method="getSummaries"
        height="100%"
        style="width: 100%; max-height: 100%">
        <el-table-column
          v-for="item in layout"
          :prop="item.key"
          :label="item.value"
          :key="item.key"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 测试按钮 -->
    <div>
      <el-row>
        <el-button type="primary" @click="addOne">增加一条</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
// 数据流组件: 开发过程中增加的组件，作为数据流展示的基础组件
// 内容：
//    展示数据流
//    
// 类型：
//    我使用的类型共有 2 中， log, warn 。 可以根据需要增加，只需要改变样式即可。
//    
// props: 
//    theme, maxLength, layout, info, 
//
/// TODO: 同样需要UI进行设计呀。。。

import ‘element-ui/lib/theme-chalk/base.css‘;

// 测试数据
const baseData = ‘《为你我受冷风吹》,为你我受冷风吹 寂寞时候流眼泪,有人问我是与非 说是与非,可是谁又真的关心谁,若是爱已不可为,明白说吧 无所谓,不必给我安慰 何必怕我伤悲,就当我从此收起真情 谁也不给,我会试着放下往事,管他过去有多美,也会试着不去想起,你如何用爱将我包围,那深情的滋味,但愿我会就此放下往事,忘了过去有多美,不盼缘尽仍留慈悲,虽然我曾经这样以为,我真的这样以为‘;
const data = baseData.split(‘,‘);
 
// 支持主题，可扩展
const themes = [‘log‘, ‘warn‘];

export default {
  props: {
    // 主题
    theme: {
      default: ‘log‘,
      validate(val) {
        return themes.indexOf(val) > -1;
      }
    },
    // 保留最大长度
    maxLength: {
      default: 100,
      type: Number,
      validate(val) {
        return val > 0;
      }
    },
    // 每条日志的分类，以及表格布局。
    layout: {
      default(){
        return [{
          key: ‘date‘,
          value: ‘日期‘,
          width: ‘40‘,
        }, {
          key: ‘level‘,
          value: ‘级别‘,
          width: ‘10‘,
        }, {
          key: ‘main‘,
          value: ‘主要内容‘,
          width: ‘50‘,
        }, {
          key: ‘info‘,
          value: ‘详细信息‘,
          width: ‘100‘,
        }];
      },
      type: Array,
      validate(val) {
        val.every((val) => {
          return val.hasOwnProperty(‘key‘)
            && val.hasOwnProperty(‘value‘)
            && val.hasOwnProperty(‘width‘);
        });
      },
    },
    // 统计信息说明词语
    info: {
      default(){
        return {
          contentSpan: ‘日志‘,
        };
      },
      validate(val) {
        return themes.indexOf(val.contentSpan) > -1;
      },
    },
  },
  name: ‘DataStream‘,
  data() {
    return {
      table: {
        data: [],
      },
    };
  },
  methods: {
    // 增加一条信息
    addOne(){
      const vm = this;
      let index = vm.table.data.length;
      if(index === data.length) return;
      if(vm.table.data.length === vm.maxLength){
        vm.table.data.length.pop();
      }
      vm.table.data.unshift({
        date: new Date().toLocaleString(),
        level: [‘Info‘, ‘Warn‘, ‘Error‘][Math.floor(Math.random()*3)],
        main: ‘我是提要‘,
        info: data[index],
      });
    },
    // 日志统计信息
    getSummaries(param) {
      return [‘统计: ‘, `目前共有 ${param.data.length} 条${this.info.contentSpan}信息`];
    },
  },
};
</script>

<style lang="scss" scoped>
.stream-wrapper {
  margin: 10px 1%;
  padding: 2px;
  width: 98%;
  height: 500px;
  border: 1px solid #000000;
  border-radius: 4px;
}

// 日志 主题样式
#log {
  background: #dbf4fc;
  color: #000;
  & /deep/ td {
    background: #fff;
  }
  & /deep/ th, & /deep/ .el-table__footer-wrapper td {
    background: #d4ece2;
    color: #2a2ad2;
  }
}

// 报警 主题样式
#warn {
  background: #e60909;
  color: #e60909;
  & /deep/ td {
    background: #a99f9f;
    color: #e60909;
  }
  & /deep/ th, & /deep/ .el-table__footer-wrapper td{
    background: #eae2d1;
    color: #0d483f;
  }
}
</style>