feat(scroll-duration): add animate effect to auto scroll

docs/auto-scroll.md

@@ -1,20 +1,35 @@
 auto-scroll 属性设置是否自动滚动到底部
 
-set auto-scroll true to auto scroll to bottom
+set auto-scroll true to auto scroll to bottom, and false to do nothing. Defaults to true.
 
 ```vue
 <template>
-  <div>
-    <log-viewer class="auto-scroll" v-for="auto in autoes" :key="auto" :height="100" :log="log" :auto-scroll="auto" />
-  </div>
+  <log-viewer class="auto-scroll" :log="log" :auto-scroll="false" />
 </template>
 <script>
+  const get = url => new Promise((resolve, reject)=>{
+    const xhr = new XMLHttpRequest()
+    xhr.open("GET",url)
+    xhr.send()
+    xhr.onload = data => resolve(data.target.responseText)
+  })
   export default{
     data(){
       return {
-        log: 'Build language: python\n[encryption, version 2.91 of 05 Jan 2007] (modified for Zip 3)Copyright (C) 2002-2007 Andrew Tridgell\nPath to mail program: /usr/sbin/sendmail\n\nSHELLOPTS\nPath to mail program: /usr/sbin/sendmail\npostgresql client version\n+cmdline_compl   +insert_expand   -perl            +user_commands\nUSE_EF_UT_TIME       (store Universal Time)\nSudoers I/O plugin version 1.8.9p5\n	TERMINFO\nCMake suite maintained and supported by Kitware (kitware.com/cmake).\nLocale to use while parsing sudoers: C\ngcc version\nPacker v1.0.2\nGNU bash, version 4.3.11(1)-release (x86_64-pc-linux-gnu)\nbats version\nmysql version\n  - with Cyrus SASL authentication\nAllow some information gathering to give useful error messages\nAuthentication timestamp timeout: 15.0 minutes\n Git commit:   afdb6d4\nThis program is free software; you can redistribute it and/or modify it under\nPAM service name to use',
+        log: '',
         autoes: [true, false]
       }
+    },
+    mounted(){
+      this.getTravisLog()
+    },
+    methods:{
+      getTravisLog(){
+        const travisUrl = 'https://api.travis-ci.com/v3/job/261228572/log.txt' // you can edit other travisUrl.
+        get(travisUrl).then((text)=>{
+          this.log = text
+        })
+      },
     }
   }
 </script>

docs/basic.md

@@ -2,16 +2,11 @@ basic usage
 
 ```vue
 <template>
-  <div>
-    <div style="margin-bottom:8px;">Show travis log</div>
-    <log-viewer :log="travisLog" :auto-scroll="false"/>
-    <div style="margin-top:16px;margin-bottom:8px;">Show nuxt build log</div>
-    <log-viewer :log="nuxtBuildLog"/>
-  </div>
+  <log-viewer :log="log"/>
 </template>
 
 <script>
-const get = url=>new Promise((resolve, reject)=>{
+const get = url => new Promise((resolve, reject)=>{
   const xhr = new XMLHttpRequest()
   xhr.open("GET",url)
   xhr.send()
@@ -20,26 +15,18 @@ const get = url=>new Promise((resolve, reject)=>{
 export default {
   data(){
     return {
-      travisLog: '',
-      nuxtBuildLog:''
+      log:''
     }
   },
   mounted(){
-    this.getTravisLog()
     this.getNuxtBuildLog()
   },
   methods:{
-    getTravisLog(){
-      const travisUrl = 'https://api.travis-ci.com/v3/job/261228572/log.txt' // you can edit other travisUrl.
-      get(travisUrl).then((text)=>{
-        this.travisLog = text
-      })
-    },
     getNuxtBuildLog(){
       const logUrl = 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/log-viewer'
       get(logUrl).then(res=>{
         res = JSON.parse(res)
-        this.nuxtBuildLog = res.payload.logs
+        this.log = res.payload.logs
       })
     }
   }

src/components/line-content.vue

@@ -4,9 +4,11 @@
       v-for="(item, index) in content"
       :key="index"
       :class="[
-        item.bold ? 'log-bold' : '',
-        item.underline ? 'log-underline' : '',
-        item.italic ? 'log-italic' : '',
+        {
+          'log-bold': item.bold,
+          'log-underline': item.underline,
+          'log-italic': item.italic
+        },
         item.foreground ? 'log-fore-' + item.foreground : '',
         item.background ? 'log-back-' + item.background : ''
       ]"

src/log-viewer.vue

@@ -10,6 +10,7 @@
     :item="LineWrapper"
     :itemcount="linesCount"
     :itemprops="getLineWrapperProps"
+    :onscroll="onscroll"
   >
   </virtual-list>
 </template>
@@ -75,6 +76,8 @@ export default {
   data() {
     return {
       start: 0,
+      scrollStart: 0,
+      animate: null,
       LineWrapper
     }
   },
@@ -100,11 +103,9 @@ export default {
       immediate: true,
       handler(lines) {
         this.$refs.virturalList && this.$refs.virturalList.forceRender()
-        this.autoScroll &&
-          this.$nextTick(() => {
-            // 在nextick外面执行会导致自动滚动到上一次的位置
-            this.start = this.lines.length + (this.loading ? 1 : 0)
-          })
+        if (this.autoScroll) {
+          this.setScrollTop(this.linesCount)
+        }
       }
     }
   },
@@ -139,6 +140,35 @@ export default {
       return {
         props
       }
+    },
+    setScrollTop(line) {
+      if (this.animate) {
+        cancelAnimationFrame(this.animate)
+      }
+      let i = this.scrollStart
+      const step = 2
+      const animation = () => {
+        this.animate = requestAnimationFrame(() => {
+          // 从起始行开始滚动，若起始行小于目标行时，每帧逐渐增加行数（向下滚），直到目标行
+          // 同理，若起始行大于目标行时，每帧减少行数（向上滚），直到目标行
+          // 若当前行在目标行范围内[line-step,line+step], 直接滚到目标行
+          if (i < line - step || i > line + step) {
+            this.$refs.virturalList.setScrollTop(i * this.rowHeight)
+            i = i < line - step ? i + step : i - step
+            animation()
+          } else {
+            this.$nextTick(() => {
+              // 在nextick外面执行会导致自动滚动到上一次的位置
+              this.start = line
+              this.scrollStart = this.start
+            })
+          }
+        })
+      }
+      animation()
+    },
+    onscroll(event, data) {
+      this.scrollStart = Math.ceil(data.offset / this.rowHeight)
     }
   }
 }