vue重置组件状态 vue-typed-js

KnifeZ 7/25/2020, 6:15:10 PM 56

在使用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="current>0" 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>
0
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

#Tags

热门文章