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

r囧r小猫 2023-09-27 10:08 150阅读 0赞

**目录**

效果如下：

使用

1.下载插件

2.安装组件

3.用法

4.文字高亮和标签高亮

--------------------

#### 效果如下： ####

![a1b163cce34f459db365bacf50831004.gif][]

--------------------

### 使用 ###

#### 1.下载插件 ####

文档查看及官网：[https://github.com/Orlandster/vue-typed-js][https_github.com_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-js
                    style="font-size: 0.0729rem; color: #01fef4"
                    v-if="isXianshiDaZiJi"
                    :startDelay="1000"
                    @onComplete="doDelay"
                    :cursorChar="'_'"
                    :strings="[
                      '<p>你好，我是智能助手-哪吒!</p>',
                      '<span>双击可以打开聊天框</span>',
                      '<p>鼠标按住可以拖拽</p>',
                    ]"
                    :contentType="'html'"
                  >
                    <div
                      style="
                        color: #01fef4;
                        text-align: center;
                        text-shadow: 0 0 0.0521rem #01fef4, 0 0 0.1042rem #01fef4;
                      "
                      class="typing"
                    ></div>
                  </vue-typed-js>

--------------------

![ce98ee3b669449c29bf2717479bb434c.png][]

--------------------

#### 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;

[a1b163cce34f459db365bacf50831004.gif]: https://img-blog.csdnimg.cn/a1b163cce34f459db365bacf50831004.gif
[https_github.com_Orlandster_vue-typed-js]: https://github.com/Orlandster/vue-typed-js
[ce98ee3b669449c29bf2717479bb434c.png]: https://img-blog.csdnimg.cn/ce98ee3b669449c29bf2717479bb434c.png