vue实现文字手工动态打出效果

vue实现文字手工动态打出效果

问题背景

本文实现vue中,动态生成文字手动打出效果。

问题分析

话不多说,直接上代码:

复制代码
<template>
  <main>
    <button @click="makeText">
      <p class="text">点击生成内容</p>
    </button>

    <p class="text" :class="{'outer-border' : stringA.length > 0}">{{ stringA }}</p>
  </main>
</template>
 
<script>
export default {
  data() {
    return {
      stringB : '卜算子·咏梅\n毛泽东\n风雨送春归,\n飞雪迎春到。\n已是悬崖百丈冰,\n犹有花枝俏。\n俏也不争春,\n只把春来报。\n待到山花烂漫时,\n她在丛中笑。',
      stringA : '',
    }
  },
  components: {
  },
  methods: {
    makeText() {
      console.log(this.stringA.length, this.stringB.length);
      if (this.stringA.length >= this.stringB.length) {
        // 退出递归
        return;
      } else {
        // stringA仍然比stringB短,进入下一次等待和递归
        setTimeout(() => {
          this.stringA += this.stringB.charAt(this.stringA.length);
          this.makeText(this.stringA, this.stringB);
        }, 50);
      }
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 30px;
  max-width: 800px;
}

.outer-border {
  border: 2px solid black;
  border-radius: 5px;
  padding: 3px;
  white-space: pre-wrap;
}
</style>

运行结果如下:

问题总结

本文实现了文字手工动态打出效果,有兴趣的同学可以进一步深入研究。

相关推荐
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia2 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia2 小时前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学