当前位置: 首页 > article >正文

vue2 el-input里实现打字机 效果

vue2 el-input里实现打字机 效果

<el-col :span="24" v-if="ifshowOtherDesc"">
                    <el-form-item label="分析" prop="otherDesc">
                        <el-input type="textarea" :disabled="disabled" autofocus="true" v-model="ruleForm.otherDesc" maxlength="3000" :rows="4" show-word-limit />
                    </el-form-item>
                </el-col>
<el-col :span="24" v-if="&& !ifshowOtherDesc">
                    <el-form-item label="分析">
                            <div class="modelAnalysisInput">
                                <vue-typed-js
                                class="desc"
                                :typeSpeed="10"
                                v-if="isTypingOtherDesc"
                                @onComplete="doDelayOtherDesc"
                                :strings="typingTextsOtherDesc"
                                :showCursor="false"
                                >
                                <div class="typing" style="white-space: pre-wrap;line-height: 1.5;color:#666"></div>
                                </vue-typed-js>
                            </div>
                    </el-form-item>
                </el-col>
script
data
isTypingOtherDesc: false,
            ifshowOtherDesc:true,
            typingTextsOtherDesc: [],
method
doDelayOtherDesc() {
            let that = this;
            setTimeout(()=>{
                this.ruleForm.otherDesc = this.typingTextsOtherDesc.toString();
                 that.isTypingOtherDesc = false;
                 that.ifshowOtherDesc = true;
            },300)
                
        },

通过假打字 @onComplete=“doDelayOtherDesc” 监听结束时赋值,关闭打字机的div 显示el-input,实现无缝切换的 gpt打字效果。

1.typingTextsOtherDesc=[‘111111’,‘22222’]
打字机需要的字符格式是数组里有字符串的格式。赋值给input需要toString() 转字符串。不然maxlength=“3000” :rows=“4” show-word-limit
的input data赋值会显示1/3000而非实际字数。
2.换行 需要后端在字符里+ \n换行


http://www.kler.cn/a/163382.html

相关文章:

  • WPF 应用程序中使用 Prism 框架时,有多种方式可以注册服务和依赖项
  • 软考:去中心化的部署有什么特点
  • 吴恩达机器学习笔记(3)
  • Django 详细入门介绍
  • IPv4与IPv6的优缺点
  • 【C语言刷力扣】66.加一
  • 深入理解 Promise:前端异步编程的核心概念
  • 29 水仙花数
  • 【后端学前端学习记录】学习计划
  • 【Azure 架构师学习笔记】- Azure Databricks (2) -集群
  • 低多边形3D建模动画风格纹理贴图
  • 《每天一个Linux命令》 -- (6) stat命令
  • 设计模式——单例模式(Singleton Pattern)
  • 寄存器、缓存、内存、硬盘、存储器的理解
  • MSSQL存储过程的功能和用法
  • 极智芯 | 解读国产AI算力 灵汐产品矩阵
  • 使用项目管理工具进行新媒体运营管理的策略与方法
  • 【前端设计模式】之适配器模式
  • 实战:Docker Compose 下 Nginx、Java、Mysql 和 Redis 服务协同部署(包含解决浏览器访问Linux部署服务器本地资源问题)
  • 用Java写一个拼图游戏
  • 25.Oracle的回收站
  • Java实现归并排序算法
  • 人工智能从 DeepMind 到 ChatGPT ,从 2012 - 2024
  • 数据结构:单链表——定义、插入、删除
  • 《深入理解计算机系统》学习笔记 - 第四课 - 机器级别的程序
  • 谈谈ACID