Vue 多行自动打字机

Vue 多行自动打字机

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div id="app">
<div class="content" v-html="show_content"></div>
</div>
<script src="https://cdn.hongfs.cn/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
// 需打印的内容,每一行一个值,过多会导致浏览器二次换行的
content: [
'中国的目标从来不是超越美国,',
'而是不断超越自我,',
'成为更好的中国。',
],
// 需显示的内容
show_content: '',
},
mounted () {
this.handleStartShowContent();
},
methods: {
// 开始显示内容
handleStartShowContent () {
// 把需打印的内容先合并成一个字符串,然后定时器按指定时间每次多显示一个或多个字。
const len = this.content.join('').length;

var i = 0;

const t = setInterval(() => {
i++;

this.show_content = this.handleGetContent(i);

// 内容全部输出完成了。
len <= i && clearInterval(t);
}, 100); // 100 每个字的输出速度,单位毫秒
},
// 显示内容处理
handleGetContent (len) {
// 存储需要显示的
var value = '';

this.content.map(item => {
// 长度用完就停止
if (len <= 0) return;

// 追加内容,有两种情况,内容有点短或者需要被截取。
value += item.length <= len ? item + '<br/>' : item.substring(0, len);

// 减去内容的长度,不需要关心我们最终截取了多少。
len -= item.length;
});

return value;
},
},
});
</script>

评论

往上