在使用 vue-typed-js时，想要通过按钮来控制一句话打取消重打来实现过场文字效果，搜索一番发现typed.js有触发reset和start方法来实现，但vue版的没有这个功能。
然后结合vue的特性决定通过直接强制刷新DOM来达到重置组件的效果，这样可以重置一些组件的动画和内部初始数据。
强制重新生成 DOM 的实现
原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。
代码示例
<template>
<div>
<a-steps :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title" />
</a-steps>
<div class="steps-content">
<vue-typed-js
:key="current"
:typeSpeed="240"
:strings="[steps[current].content]"
@onComplete="showButton()">
<h3>
<span class="typing"></span>
</h3>
</vue-typed-js>
</div>
<div class="steps-action">
<a-button v-if="current steps.length - 1&&isTypedOk" type="primary" @click="next">继续</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
@click="$message.success('Processing complete!')">
完成</a-button>
<a-button v-if="current0" style="margin-left: 8px" @click="prev">返回</a-button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
current: 0,
isTypedOk: false,
steps: [{
title: '1',
content: '11111'
},
{
title: '2',
content: '22222'
},
{
title: '3',
content: '3333'
},
{
title: 'Last',
content: 'Last-content'
}
]
}
},
methods: {
showButton () {
this.isTypedOk = true
},
next () {
this.isTypedOk = false
this.current
},
prev () {
this.current--
}
},
mounted () {
}
}
</script>
<style scoped>
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 10px;
}
.steps-action {
margin-top: 24px;
}
</style>
