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

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

article 2024/9/20 9:36:25

<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/news/163382.html