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>
示例 （是不是很醜。。。）
好了，我這個前端沒什麼美感。。。堅守基礎的航線，堅持自己的方向，不想撤退。
你們可以隨便在各種地方使用，不過若要釋出在網上或者轉載的話請註上原文地址：
作者：鐵柱成針
原文地址： http://www.cnblogs.com/zgh-blog/p/jsDataStreamShown.html