vue 实现打字机效果

打字机效果组件,支持像打字机一样模仿键入文本。支持vue 插值语法和表格等打印

ps: 灵感来着于vue-type-writer 但是 这个组件过于简单 就自己整了一个

一、预览

在这里插入图片描述

二、代码

组件:

<template><div :style="{ visibility: visibility }"><slot></slot></div>
</template><script>
export default {name: "vue-text-dot",props: {// 间隔时间interval: { type: Number, default: 75 },// 光标 建议有表格的时候不要使用光标 会导致渲染异常cursorStr: {type: String,default: "",},},data() {return {visibility: "hidden", // timer: 0, // 定时器initialDom: null, // 记录初始domprogress: 0, // 当前文本书写进度// writeStatus: "NotStart",// 当前书写状态=> NotStart: 未开始;Processing:书写中;Completed 书写完毕};},mounted() {// 拷贝初始所有dom 便于重新开始this.initialDom = JSON.parse(JSON.stringify(this.$el.innerHTML));},methods: {// 开始 / 重新开始start() {this.visibility = "visible";this.progress = 0;this.$el.innerHTML = "";clearInterval(this.timer);this.write();this.$emit("writeStart");},// 暂停pause() {clearInterval(this.timer);this.$emit("writePause");},// 继续continueWrite() {if(!this.progress || this.progress >= this.initialDom.length){return}clearInterval(this.timer);this.write();this.$emit("writeContinue");},// 重置reset() {this.visibility = "hidden";this.progress = 0;this.$el.innerHTML = "";clearInterval(this.timer);},// 书写write() {this.timer = setInterval(() => {var current = this.initialDom.substr(this.progress, 1);// console.log(current);// 跳过 标签渲染if (current === "<") {this.progress = this.initialDom.indexOf(">", this.progress) + 1;} else {this.progress++;}// console.log(this.progress & 1, "this.progress");// 如果有光标配置 拼接到最新渲染的地方if (this.cursorStr) {this.$el.innerHTML =this.initialDom.substring(0, this.progress) +(this.progress < this.initialDom.length && this.progress & 1? this.cursorStr: "");} else {this.$el.innerHTML = this.initialDom.substring(0, this.progress);}// 文本书写进度 大于需要书写的总长度 判断为渲染完成if (this.progress >= this.initialDom.length) {clearInterval(this.timer);this.$emit("writeEnd"); // 打字完成后的回调方法}}, this.interval);},},beforeDestroy() {clearInterval(this.timer);},
};
</script>

父级组件引用

<template><div class="app-container home"><div class="body"><button type="primary" @click="start">开始 / 重新开始</button><button type="primary" @click="pause">暂停</button><button type="primary" @click="continueWrite">继续</button><button type="primary" @click="reset">重置</button><VueTypewriterclass="tl"ref="typewriter":interval="50"cursorStr=""@writeEnd="writeEnd"><div class="comments"><p>const array = [1, 2, 2, 3, 4, 4, 5];</p><p>const uniqueArray = Array.from(new Set(array));</p><p>console.log(uniqueArray);</p><p>{{ message }}</p></div><table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td></tr></table></VueTypewriter></div></div>
</template><script>
import VueTypewriter from "./vue-typewriter";
export default {name: "Demo",components: { VueTypewriter },data() {return {message: "测试插值表达式 是否能够正常渲染",};},methods: {// 开始start() {this.$refs.typewriter.start();},// 暂停pause() {this.$refs.typewriter.pause();},// 继续continueWrite() {this.$refs.typewriter.continueWrite();},// 重置reset() {this.$refs.typewriter.reset();},// 结束回调writeEnd() {console.log("end");},},
};
</script><style scoped lang="scss">
.home {text-align: left;.body {width: 890px;height: 500px;padding: 20px;border: #b2c92a solid 10px;button {margin-right: 20px;padding: 8px 20px;}.comments {p {font-size: 18px;color: green;}}table {margin: 20px 0;border-collapse: collapse;td {padding: 10px 20px;border: 1px solid #ccc;}}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/47858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI 模型本地推理 - YYPOLOE - Python - Windows - GPU - 吸烟检测(目标检测)- 有配套资源直接上手实现

Python 运行 - GPU 推理 - windows 环境准备python 代码 环境准备 FastDeploy预编译库下载 conda config --add channels conda-forge && conda install cudatoolkit11.2 cudnn8.2 pip install fastdeploy_gpu_python-0.0.0-cp38-cp38-win_amd64.whlpython 代码 impo…

虚拟机的状态更新

文章目录 虚拟机的更新一、检查虚拟机的配置1.已连接状态2. 保证镜像源挂载 二、进行更新三、其余事项 虚拟机的更新 虚拟机的更新是确保系统软件包和库的更新&#xff0c;以获得最新的修复和改进&#xff1b;如果长期没有打开单机或者集群&#xff0c;可以考虑先进行一次更新…

Artix7系列FPGA实现SDI视频编解码,基于GTP高速接口,提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案在Xilinx--Kintex系列FPGA上的应用本方案在Xilinx--Zynq系列FPGA上的应用 3、详细设计方案设计原理框图SDI 输入设备Gv8601a 均衡器GTP 高速接口-->解串与串化SMPTE SD/HD/3G SDI IP核BT1120转…

微软Edge浏览器全解析教程

微软Edge浏览器全解析教程 微软Edge浏览器&#xff0c;作为微软公司精心打造的一款现代化网页浏览器&#xff0c;自其首次发布以来&#xff0c;凭借其卓越的性能、出色的用户体验和不断迭代的功能&#xff0c;赢得了广大用户的青睐。本文将全面解析微软Edge浏览器的各个方面&a…

Docker容器下安装Matlab,无需挂载

Matlab的安装需要这些文件 传入ubuntu后&#xff0c;改过相关的文件权限后&#xff0c;发现还是无法挂载 这有可能是docker的安全管理策略导致容器不能挂载&#xff0c;因此采用不挂载形式&#xff0c;直接解压的方式安装Matlab 1.将iso改成zip&#xff0c;并解压 2.解压rar文件…

电机泵盖机器人打磨去毛刺,选德国进口高精度主轴

机器人打磨去毛刺该如何选择主轴呢&#xff1f;首先我们需要考虑的是工件的材质&#xff0c;电机泵盖通常使用铸铁、不锈钢、合金钢等金属材质&#xff0c;因此这类保持的硬度较高&#xff0c;一般会选择功率、扭矩较大的德国进口高精度主轴Kasite 4060 ER-S。 Kasite 4060 ER-…

设计分享—国外网站设计赏析

今天还是给大家分享一些国外的网站设计案例&#xff5e; 蓝蓝设计是一家专注而深入的界面设计公司&#xff0c;为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平…

JVM和类加载机制-01[JVM底层架构和JVM调优]

JVM底层 Java虚拟机内存模型JVM组成部分五大内存区域各自的作用虚拟机栈(线程栈)栈帧内存区域 本地方法栈程序计数器为什么jvm要设计程序计数器&#xff1f; 堆方法区 JVM优化-堆详解JVM底层垃圾回收机制jvm调优工具jvisualvm.exeArthas工具使用 Java虚拟机内存模型 JVM跨平台原…

Java中的ArrayList和LinkedList有什么区别?

Java中的ArrayList和LinkedList是两种常用的集合实现类&#xff0c;它们都属于Java集合框架的一部分&#xff0c;但它们在内部实现、性能特点、使用场景等方面存在明显的区别。以下是对这两种集合的详细比较&#xff1a; 1. 数据结构差异 ArrayList&#xff1a;ArrayList是动…

SpringBoot之全局异常处理

默认情况下的异常现象 创建一个接口 &#xff08;接口需要传递参数key&#xff09; RestController RequestMapping("/exception") public class ExceptionController {GetMapping("/accept")public String acceptKey(RequestParam("key") Str…

C语言第5天作业 7月16日

目录 1.求1000以内所有的质数。 2.有1、2、3、4个数字&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f; 3.猴子吃桃问题 4.判断最大值 1.求1000以内所有的质数。 质数&#xff1a;只能够1和它本身整除 #include <stdio.h> in…

Camera Raw:首选项

Camera Raw 首选项 Preferences提供了丰富的配置选项&#xff0c;通过合理设置&#xff0c;可以显著提升图像处理的效率和效果。根据个人需求调整这些选项&#xff0c;有助于创建理想的工作环境和输出质量。 ◆ ◆ ◆ 打开 Camera Raw 首选项 方法一&#xff1a;在 Adobe Bri…

Linux系统学习日记——vim操作手册

Vim编辑器是linux下的一个命令行编辑器&#xff0c;类似于我们windows下的记事本。 目录 打开文件 编辑 保存退出 打开文件 打开 hello.c不存在也可以打开&#xff0c;保存时vim会自动创建。 效果 Vim打开时&#xff0c;处于命令模式&#xff0c;即执行命令的模式&#x…

VUE中setup()

在Vue中&#xff0c;setup() 函数是Vue 3.0及更高版本引入的一个重要特性&#xff0c;它是Composition API的入口点。setup() 函数用于初始化组件的状态和逻辑&#xff0c;包括定义响应式数据、方法和生命周期钩子。以下是关于setup() 函数的详细解释&#xff1a; 1. 作用与特…

解决IDEA 中出现已有类、函数找不到的情况

缓存导致部分索引失效&#xff0c;需要刷新缓存并重启idea即可 1、File > Invalidate Cache / Restart... 2、Invalidate and Restart

C# 4.List

comboBox使用的下拉框 Lsit 列表 1 创建List对象 List<string> list new List<string>(); 2 Add给list 添加元素 list.Add("吃饭"); list.Add("睡觉"); list.Add("打豆豆"); 3 删除一个元素 list.Remove("吃饭"); // 删…

【精简版】jQuery 中的 Ajax 详解

目录 一、概念 二、jQuery 发送 GET 请求 三、jQuery 发送 POST 请求 四、$.ajax() 方法 1、含义 2、settings 选项 ① type 属性 ② async 属性 ③ headers 属性 ④ contentType 属性 ⑤ processData 属性 ⑥ data 属性 ⑦ timeout 属性 ⑧ beforeSend(jqXHR) 方…

聊聊常见的分布式ID解决方案

highlight: xcode theme: vuepress 为什么要使用分布式ID&#xff1f; 随着 Web 开发技术的不断发展&#xff0c;单体的系统逐步走向分布式系统。在分布式系统中&#xff0c;使用分布式 ID(Distributed IDs)主要是为了在没有单点故障的情况下生成唯一标识符。这些唯一标识符在很…

C++【OpenCV】图片亮度色度归一化

#include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp> #include <iostream>using namespace cv; using namespace std;int main() {Mat image imread("SrcMF.jpg");// 灰度、Gamma归一化亮度cv::Mat m_gray;cv::cvtColor(image, m_gra…

Linux-CentOS7忘记密码找回步骤

虚拟机版本 一、进入开机页面&#xff0c;先按上下&#xff08;↑↓&#xff09;键&#xff0c;以免系统自动启动。 二、按“e”键进入编辑页面,找到如下图位置&#xff0c;输入&#xff1a;init/bin/sh 按CTRLX 进入单用户模式。 三、 输入 mount -o remount,rw / 然后按 ent…