add maxLogNumber option

chalecao · Sep 21, 2017 · c13c6d6 · c13c6d6
1 parent 370b835
commit c13c6d6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/example/demo1.html b/example/demo1.html
@@ -40,7 +40,8 @@ <h1 class="page_title">Demo 1</h1>
 <script>
 // 初始化vConsole
 window.vConsole = new window.VConsole({
-  defaultPlugins: ['system', 'network', 'element', 'storage'] // 可以在此设定要默认加载的面板
+  defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
+  maxLogNumber: 1000
 });
 
 console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板，可用于展示 console 日志，方便开发、调试。');

diff --git a/src/log/log.js b/src/log/log.js
@@ -32,8 +32,10 @@ class VConsoleLogTab extends VConsolePlugin {
     this.isShow = false;
     this.$tabbox = null;
     this.console = {};
-    this.logList = [];
+    this.logList = []; // save logs before ready
     this.isInBottom = true; // whether the panel is in the bottom
+    this.maxLogNumber = 1000;
+    this.logNumber = 0;
 
     this.mockConsole();
   }
@@ -45,6 +47,8 @@ class VConsoleLogTab extends VConsolePlugin {
    */
   onInit() {
     this.$tabbox = $.render(this.tplTabbox, {});
+    this.maxLogNumber = this.vConsole.option.maxLogNumber || this.maxLogNumber;
+    this.maxLogNumber = Math.max(1, this.maxLogNumber);
   }
 
   /**
@@ -348,6 +352,14 @@ class VConsoleLogTab extends VConsolePlugin {
     // render to panel
     $.one('.vc-log', this.$tabbox).insertAdjacentElement('beforeend', $line);
 
+    // remove overflow logs
+    this.logNumber++;
+    if (this.logNumber > this.maxLogNumber) {
+      let $firstItem = $.one('.vc-item', this.$tabbox);
+      $firstItem.parentNode.removeChild($firstItem);
+      this.logNumber--;
+    }
+
     // scroll to bottom if it is in the bottom before
     if (this.isInBottom) {
       this.scrollToBottom();