vue 实现打字机效果

** 父组件 HTML**

<!-- 父组件 -->
<template><!-- 我这里是循环向打字组件传值 --><div class="title" v-for="(v,k) in content"><typewriter class="str" :str="v"></typewriter></div>
</template>

** 父组件 JS**

<!-- 父组件 -->//设置时间，将words中的文字，逐条追加到contentimport typewriter from '../components/nav/typewriter.vue'export default {data() {return {content: [],str:"我是文字",words:["我承认世界对我有点诱惑，","不该像叛逆期的孩子拼命耍。 ","你能不能再编一个理由等我回家。",]}},mounted() {this.setTime();},components: {typewriter: typewriter,},methods:{setTime(){var arr = this.words;var that = this;arr.forEach(function (v,k){setTimeout(function (){that.content.push(v)},k*2500)})}}}

子组件 HTML

<!-- 子组件 -->
<template><div><span class="font" v-for="(v,k) in words">{{v}}</span></div>
</template>

子组件 JS

export default{data(){return {words: [],strArr:[],}},mounted() {this.start();},methods:{start(){//将获取到的字符串切割成数组this.strArr = this.str.split("");//循环将单个的文字 延时追加到words数组中for(var i = 0;i<this.strArr.length;i++){var res = setTimeout(this.write(i),i * 150);}},write(i){return()=>{this.words.push(this.strArr[i]);}}},//接收父组件传递过来的 strprops:['str']}

vue 实现打字机效果相关推荐

在 vue 中使用 vue-typed-js 实现打字机效果
这篇博客和我的博客:原生 JS 实现打印机效果,一个字一个字出现,再一个字一个字消失,如此循环是实现的相同功能--打字机效果.即,一个字一个字出现,再一个字一个字消失,如此循环.如下图为大概样子: ...
cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js
本文同步发表在我的个人博客中: 沧沧凉凉www.cclliang.com 打字机效果是非常酷的文字显示效果,视觉表现极佳,而通过Typed.js可以很简单的在web开发中实现打字机效果. 1. 官网 ...
Vue3实现打字机效果
typeit 介绍 typeit是一款轻量级打字机特效插件.该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放.响应式等特点.官方文档安 ...
利用css动画实现打字机效果
简言通过使用css的animation(动画属性)实现文字显示的打字机效果. 单行思路实现步骤: 将文本框属性设置为等宽字体,计算文本框的字数,设置文字大小.相对布局等. 将文本框隐藏,通过动画 ...
想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js 前言: 最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西.看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思 ...
jq挑战30天——打字机效果+小程序
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
Gamemaker studio2经验（4）——打字机效果
问题概述在很多游戏中--算了实在不好意思写引言了,就直说啦.如果你是UT粉,想用gm搞搞UT的同人作品但是又无从下手,那么请看过来. 对于RPG类游戏,文字交流系统是不可或缺的,但是gm的文字系统- ...
如何实现文字逐个出现的打字机效果
嗨!大家好,我是小蚂蚁. 今天分享一下如何在微信小游戏制作工具中实现文字逐个出现的打字机效果,这个小功能可以用于游戏中的文字对白的展示,如果你要做的是一个文字类游戏的话,那么肯定用的上. 最终的效果如 ...
html5 打字机效果,使用JavaScript制作打字机文本效果
我们在看电影时经常能够看到一些炫酷的打字机效果,用于显示一些地名或剧情简介.我们在网页中也能够实现类似的效果,目前网上已经有很多打字机效果的插件,如轻量级响应式jQuery打字机特效插件和逼真的js打 ...
java图形打字机_Android模仿打字机效果的自定义View实现
前言在做splash界面的时候,需要做类似于打字机打字的效果,字一个一个地蹦出来,显示每一个字都带有打字的声音. 效果演示本例自定义View的演示效果如下(PS:一直不知道在Android上怎么录 ...

vue 实现打字机效果

vue 实现打字机效果相关推荐

最新文章

热门文章