介绍
Vue3 实现打字机特效
# 打字机是什么效果呢
- 经常会看到一些大佬的播客的首页有很多打字机效果
- 这种特效如何在Vue3实现呢
# Vue3实现打字机的组件
- 目前网上有easy-typer-js (opens new window) 和 vue-typed-js (opens new window) 这两个打字机插件 可惜这两个插件都是Vue2才能直接调用 Vue3会报错 如果我们用纯css写一个又感觉效果不好实现
- 经过一小时的搜寻 我发现了vue3-typed-js (opens new window) Vue3专属打字机效果插件 非常感谢作者 他基于vue-typed-js (opens new window) 进行了二次封装支持了Vue3! 但是这个组件的下载量低的可怜 希望大家多给作者点点关注 双击!
# Vue3实现打字机步骤
- 其实作者在md文档写的很清楚了 那我们就直接阅读 直接实现
第一步 先下载vue3-typed-js
npm i vue3typed
第二步 在入口文件main.js中导入声明
- 注意: Vue3的全局方法设置和Vue2的不一样
// 导入打字机
import vuetyped from 'vue3typed'
// 设置Vue3的全局方法实例
// 代替Vue2的 Vue.use的全局方法
const app = createApp(App)
// 挂载打字机的全局方法 .use(vuetyped) 请无视.use(store).use(router)
app.use(vuetyped).use(store).use(router)
// 挂载实例
app.mount('#app')
第三步 在Vue中使用
- 注意
<div class="typing" />必须要有 这个是插槽渲染你要实现打字机效果的内容
<template>
<div>
<vuetyped :strings="['面试官你好', '我叫刘凯利', '来自天津']" :loop="true" :smart-backspace="true">
<div class="typing" />
</vuetyped>
</div>
</template>
- 你可以通过
typing这个类名 来设置打字机的一些样式
第四步 查看组件的方法和回调函数
- 你如果有特殊需求 需要去官方文档中查看哦 传送门 (opens new window)
# 注意事项
- 如果
<vuetyped>在容器里面 在设置font-size的时候 需要给容器和内容都设置font-size - 也就是下图的
.overall-header-left和.typing都要设置font-size容器是光标大小 内容是文字大小
详细代码
.overall-header-left {
align-self: center;
justify-self: center;
font-size: 32px; /* 要给容器设置font-size */
}
.typing {
font-weight: 700;
font-size: 32px; /* 要给内容也设置font-size */
}
# Vue2实现打字机效果
- Vue2实现打字机效果 用的是vue-typed-js (opens new window) 组件
第一步 下载
npm install --save vue-typed-js
第二步 在入口文件main.js中导入声明
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
第三步 Vue中使用
<template>
<div>
<!-- infinite loop -->
<vue-typed-js :strings="['awesome', 'brilliant']" :loop="true">
<h2>We are a <span class="typing"></span> company!</h2>
</vue-typed-js>
</div>
</template>