您的位置：首页 > Web前端 > Vue.js

Vue 中数据流组件

2019-01-21 20:16 1446 查看

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

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

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>