【组件封装】vue打字机效果和文字发光

目录

效果如下：

使用

1.下载插件

2.安装组件

3.用法

4.文字高亮和标签高亮

效果如下：

使用

1.下载插件

文档查看及官网：/Orlandster/vue-typed-js

npm install --save vue-typed-js

2.安装组件

import Vue from 'vue'import VueTypedJs from 'vue-typed-js'Vue.use(VueTypedJs)

3.用法

<vue-typed-jsstyle="font-size: 0.0729rem; color: #01fef4"v-if="isXianshiDaZiJi":startDelay="1000"@onComplete="doDelay":cursorChar="'_'":strings="['<p>你好，我是智能助手-哪吒!</p>','<span>双击可以打开聊天框</span>','<p>鼠标按住可以拖拽</p>',]":contentType="'html'"><divstyle="color: #01fef4;text-align: center;text-shadow: 0 0 0.0521rem #01fef4, 0 0 0.1042rem #01fef4;"class="typing"></div></vue-typed-js>

4.文字高亮和标签高亮

盒子发光：

box-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be !important;

文字发光：

text-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be !important;