页面效果链接，点击查看
https://live.csdn.net/v/419208?spm=1001.2014.3001.5501
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机效果</title>
<style>
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(item, index) in clientpreferenceVOListCopy">
<div class="flex">
<div>
{{ item.type }}
</div>:
<div class="flex-1" v-html="item.summary"></div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
clientpreferenceVOList: [
{ "type": "意外", "summary": "虽然客户目前为赋闲大众，但生活中总会有意外发生。根据中国保险监督管理委员会的数据，2019年中国交通事故死亡人数约为3.7万人，平均每天有877人因交通事故而丧生。意外风险不仅包括交通事故，还包括家庭意外、职业意外等。考虑到客户目前为单身贵族，可能需要承担更多的家庭责任，因此意外风险不容忽视。购买意外险可以为客户提供意外伤害的保障，确保在意外发生时能够得到及时的经济支持。" },
{ "type": "医疗", "summary": "客户目前无社保，意味着在医疗方面可能会面临较大的经济压力。根据中国保险监督管理委员会的数据，2019年中国医疗费用总支出约为6.5万亿元，其中个人自付比例约为20%，而客户作为单身贵族，可能需要承担更多的自付费用。医疗风险不仅包括治疗费用，还包括药物费用、检查费用、住院费用等。因此，购买医疗保险对于客户来说至关重要，可以有效减轻因疾病带来的经济负担。" },
{ "type": "重疾", "summary": "客户目前为36岁-45岁，处于单身贵族阶段，无家庭负担，但关注点为医疗健康。这意味着客户可能面临较高的重疾风险。根据统计数据，中国新发恶性肿瘤的发病数每年都在增加，且发病年龄呈下降趋势，35-44岁组发病人数占全部恶性肿瘤发病人数的40%，且发病与工作压力、生活压力、环境污染、不良生活习惯等密切相关。考虑到客户目前的职业为赋闲大众，生活压力可能较大，因此重疾风险不容忽视。建议客户购买重疾险，以减轻因重疾带来的经济负担，保障自己能够得到及时和有效的治疗。" }
],
clientpreferenceVOListCopy: [],
index: 0,
ind: 0,
timer: null
},
mounted() {
this.typeWriter();
},
methods: {
typeWriter() {
const item = this.clientpreferenceVOList[this.ind];
let o = { type: item.type, summary: '' };
this.clientpreferenceVOListCopy.push(o);
console.log('this.clientpreferenceVOListCopy', this.clientpreferenceVOListCopy);
this.timer = setInterval(() => {
this.dealO();
}, 50);
},
dealO() {
console.log('this.index', this.index, this.clientpreferenceVOList[this.ind].summary.charAt(this.index));
if (this.index < this.clientpreferenceVOList[this.ind].summary.length) {
// 将当前字符添加到文本元素中
this.clientpreferenceVOListCopy[this.ind].summary += this.clientpreferenceVOList[this.ind].summary.charAt(this.index);
this.index++;
} else {
// 设置延迟后继续执行函数
clearInterval(this.timer);
this.timer = null;
this.index = 0;
this.ind++;
if (this.ind <= 2) {
this.typeWriter();
}
}
}
},
beforeDestroy() {
// 清除定时器
clearInterval(this.timer);
this.timer = null;
}
})
</script>
</body>
</html>
