Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

Vue 中数据流组件

铁柱成针 2019-01-21 20:16:00 阅读数:228 评论数:0 点赞数:0 收藏数:0

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

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

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>

 

示例 (是不是很丑。。。)

 

 好了,我这个前端没什么美感。。。坚守基础的航线,坚持自己的方向,不想撤退。

 

你们可以随便在各种地方使用,不过若要发布在网上或者转载的话请注上原文地址:

作者:铁柱成针

原文地址:http://www.cnblogs.com/zgh-blog/p/jsDataStreamShown.html

 

版权声明
本文为[铁柱成针]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/zgh-blog/p/data_stream2.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领