好久不見呀，這兩年寫了很多很多東西，也學到很多很多東西，沒有時常分享是因為大多都是我獨自思考。明年我想出去與更多的大神交流，再修築自己構建的內容。
有時候我會想：我們遇到的問題，碰到的界限，是別人給的還是我們自己給的？其實我覺得自己選擇的方向是對的，但是有時難免會懷疑，是否有人和我在做一樣的事情，我希望找到有趣的伙伴，做一些有趣的事情。
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