一、需求
当某个程序在后端运行的时候，前端经常要显示一个动态的进度条，或者 loading 的动画，或者百分比的数字
当然，更好的效果是展示给用户程序运行的具体细节，比如运行中记录的日志
这就好像电视剧结束后播放的演员表一样
二、实现
一般来说，有两种方法来实现这个需求。
1、scrollIntoView()
scrollIntoView()方法会滚动元素的父容器，使调用scrollIntoView的元素在父元素中可见。
语法如下：
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
参数如下：
| 参数 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| alignToTop | boolean | true | 该元素的顶端是否和其所在滚动区的可视区域的顶端对齐 |
| scrollIntoViewOptions | object | {behavior: “auto”, block: “start”, inline: “nearest”} | behavior：定义滚动动画过度，可选auto 、smooth；block：定义垂直方向的对齐，可选 start, center, end, 或 nearest；inline：定义水平方向的对齐，可选 start, center, end, 或 nearest |
使用方法：
<template>
<div >
<strong>进程日志</strong>
<div style="max-height:120px; position:relative">
<div v-if="logs.length">
<p
class="logList-item"
v-for="(item, index) in logs"
:key="index"
:id="(logs.length === index+1)?'scollLog':''"
>{
{
item }}</p>
</div>
<p v-else>暂无数据</p>
</div>
</div>
</template>
<script lang='ts'>
import {
Component, Vue, Watch, Prop } from 'vue-property-decorator'
import {
formatTime } from '@/utils'
@Component
export default class extends Vue {
private name: string = 'processLog';
private logs: Array<string> = [];
@Prop() private LOGS: any;
@Prop() private scrollT: any;
// getData 将父组件传递过来的日志转成 `[2021-01-01 12:12:12] 系统正在启动` 这种格式
private getData () {
this.logs = this.LOGS
? this.LOGS.map(
(item: object): string =>
'[' + formatTime(item.updatedTime) + '] ' + item.content + '\n'
)
: []
}
@Watch('LOGS')
scrollLogs (newValue: any) {
this.getData()
// 在日志渲染之后，将最底下的日志滚动到其父元素可视区域内
this.$nextTick(() => {
let top = 160
if (newValue.length !== 0 && this.scrollT < top) {
(document.getElementById('scollLog') as HTMLElement).scrollIntoView({
behavior: 'smooth', block: 'nearest' })
}
})
}
mounted () {
this.getData()
}
}
</script>
<style lang="scss" scoped>
.logList-item {
padding: 8px 0;
margin: 0;
}
</style>
总结
这个方法的对 ios safari 和 IE 不是很友好，其他的浏览器没有什么问题
另外，这个方法对布局也没有什么要求，简单方便，易于理解，不管后端返回的是全量数据还是累加数据，只需要针对最后一条渲染的日志调用即可
2、scrollTo
这个方法非常常用，语法和参数就略过了，需要注意的是这个方法对布局有要求，布局不对，这个方法是实现不了滚动的
使用方法
<template>
<div class="console-wraper">
<div class="console_window" ref="consoleWindow">
<div id="console_output" ref="consoleOutput">
<-- 这里写日志信息，注意，一定要在父元素外再套一层-->
</div>
</div>
</div>
</template>
<script>
/* eslint-disable camelcase */
import {
postRest } from '@/utils/http'
export default {
data() {
return {
sessionType: '',
sessionId: 0,
command: '',
}
},
methods: {
async getData() {
const res = await postRest(`/sessions/${
sessionId}/shell`, {
read: true, cmd: command })
if (!res) return
this.command = ''
this.cleanData(res)
},
cleanData(res) {
const {
con_prompt, con_update, con_append } = res
this.consolePrompt = unescape(con_prompt)
try {
let conAppend = JSON.parse(con_append)
if (conAppend.length) {
conAppend.forEach(item => {
this.printLine(unescape(item[1]), item[0])
})
} else {
if (con_update.length) {
this.printLine(unescape(con_update), 'output_line')
}
}
} catch (e) {
console.log('error')
}
},
printLine(s, type) {
if ((s = String(s))) {
let n = document.createElement('pre')
if (!type) type = 'output_line'
// IE has to use innerText
if (n.innerText !== undefined) {
n.innerText = s
// Firefox uses createTextNode
} else {
n.appendChild(document.createTextNode(s))
}
n.className = type
this.$refs.consoleOutput.appendChild(n)
// 添加完日志后，让父元素滚动到其自身的距离
this.$refs.consoleWindow.scrollTop = this.$refs.consoleWindow.scrollHeight
}
},
help () {
this.printLine(' Web Console Internal Commands\n')
this.printLine('=========================================\n\n')
this.printLine(' /help Show this text\n')
this.printLine(' /clear Clear the screen\n')
this.printLine('\n')
},
clear () {
this.$refs.consoleOutput.innerHTML = ''
}
},
async mounted() {
this.getData()
}
}
</script>
<style lang=scss scoped>
.console-wraper{
display: flex;
flex-direction: column;
height: 100%;
}
.console_window {
flex: 1;
background: #333;
overflow: auto;
.console_output {
white-space: pre-wrap;
word-wrap: break-word;
padding: 12px;
font-weight: bold;
}
/deep/ pre.input_line {
font-size: 14px;
color: yellow;
opacity: 0.8;
padding: 0 20px;
}
/deep/ pre.output_line {
color: #fff;
font-size: 13px;
white-space: pre-wrap;
word-wrap: break-word;
padding-left: 40px;
opacity: 0.7;
}
}
</style>
喜欢可以收藏一下，哈哈哈