vue3 实现打字机效果

功能描述

如下面视频展示的那样，要实现一段文本逐字母出现，并重复，光标会随着字母移动。

实现

这个功能是使用 vue3 的一个工具 vue3typed 来实现的。

1. 装包

npm i vue3typed

附 npm 官网装包地址：vue3typed - npm (npmjs.com)，里面包含了详细的使用教程以及属性。

2. 在 main.js 中引入

import vuetyped from 'vue3typed'
app.use(vuetyped);

3. 使用

<div class="title">A New Era of
    <vuetyped :strings="[' Revolutionize Search']" :showCursor="true" :typeSpeed="150" :loop="true">
        <span class="typing"></span>
    </vuetyped>
</div>

顺便再附加一个剪辑视频的网站：Online Video Converter - 将视频文件转换为MP4、AVI、MPEG、FLV、3GP、MKV、h264或h265 (video-converter.com)

 以及一个视频转gif格式的网站：视频转gif - 在线工具 (tool.lu)