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

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

效果如下:


a1b163cce34f459db365bacf50831004.gif

使用


1.下载插件


文档查看及官网: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;


相关文章
|
1天前
|
JavaScript 前端开发
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南
|
1天前
|
JavaScript 前端开发 API
技术好文:vue混入(mixin)的使用
技术好文:vue混入(mixin)的使用
|
1天前
|
移动开发 JavaScript 程序员
程序员必知:vue播放video插件vue
程序员必知:vue播放video插件vue
|
1天前
|
JavaScript 程序员
程序员必知:vue中按钮使用v
程序员必知:vue中按钮使用v
|
1天前
|
JavaScript
Vue学习系列(二)——组件详解
Vue学习系列(二)——组件详解
|
1天前
|
JSON 资源调度 JavaScript
|
2天前
|
分布式计算 资源调度 JavaScript
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
程序员必知:vue项目创建和启动、ElementUI的安装和快速学习
|
2天前
|
JavaScript
vue基础概念(1)
vue基础概念(1)
6 0
|
2天前
|
JavaScript
vue父子组件传值,父组件内容更新子组件内容不实时更新
vue父子组件传值,父组件内容更新子组件内容不实时更新
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1005 0