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-jsclass="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換行
)
