打字机

https://blog.csdn.net/qq_36410795/article/details/133091085

在你的Vue组件中使用它：



npm install vue-typewriter-effect --save

yarn add vue-typewriter-effect
在你的Vue项目中引入并使用这个组件：

import Vue from 'vue';
import VueTypewriter from 'vue-typewriter-effect';

Vue.use(VueTypewriter);

https://blog.csdn.net/weixin_42936434/article/details/127223638

npm install vue-type-writer –save

<template>
  <div class="app-container home">
    <div class="body">
      <el-button type="primary" @click="start"> 实现js数组去重 </el-button>
      <VueTypewriter class="tl" ref="typewriter" :interval="50" :style="{ visibility: status }">
        <div class="comments">
          <p>const array = [1, 2, 2, 3, 4, 4, 5];</p>
          <p>const uniqueArray = Array.from(new Set(array));</p>
          <p>console.log(uniqueArray);</p>
        </div>
      </VueTypewriter>
    </div>
  </div>
</template>

<script>
import VueTypewriter from 'vue-type-writer'
export default {
  name: 'Demo',
  components: { VueTypewriter },
  data() {
    return {
      status: 'hidden',
    }
  },
  methods: {
    start() {
      this.status = 'visible'
      this.$refs.typewriter.$emit('typewrite')
    },
  },
}
</script>

<style scoped lang="scss">
.home {
  .body {
    width: 890px;
    height: 500px;
    padding: 20px;
    border: #b2c92a solid 10px;
    .comments {
      p {
        font-size: 18px;
        color: green;
      }
    }
  }
}</style>