vue2 el-input里实现打字机 效果
2023-12-13 10:36:09
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换行
文章来源:https://blog.csdn.net/weixin_43858851/article/details/134882417
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!