打字机输出效果，且滚动到底部效果

流云浮沙

已于 2024-09-30 15:57:48 修改

阅读量379

点赞数 4

文章标签：前端 javascript

于 2024-09-30 15:45:01 首次发布

本文链接：https://blog.csdn.net/weixin_37728842/article/details/142658202

版权

// 打印文本可根据参数区分

typeText(type, text, cb) {

      let index = 0;

      this.typeTextTimer = raf.setInterval(() => {

        if (index < text.length) {

          if (type === "welcome") {

            this.welcomeMsg += text.charAt(index);

          } else if (type === "wakeup") {

            this.wakeupTips += text.charAt(index);

          }

          index++;

          this.scroll2bottom(true);

        } else {

          this.scroll2bottom(true);

          if (type === "welcome") {

            this.showWelcomeMsg = false;

          }

          raf.clearInterval(this.typeTextTimer);

          cb && cb();

        }

      }, 150);

    },

// 滚动到容器底部

    scroll2bottom(isWelcomeMsg = false) {

      this.$nextTick(() => {

        const askTextDom = isWelcomeMsg

          ? this.$refs.welcomeMsgDom

          : this.$refs.askTextDom;

        askTextDom &&

          askTextDom.scrollTo({

            top: askTextDom.scrollHeight,

            behavior: "smooth",

          });

      });

    },

// 方法调用


        this.typeText("welcome", this.tempWelcomeMsg, () => {

                if (process.env.VUE_APP_SHOW_TIPS === "true") {

                  this.$message.error(

                    "无唤醒词，设置 asr 类型为 0（语音识别）"

                  );

                }

                this.setAsrType(0);

                this.initRecorder();

                this.setRecordingBtnVisible(true);

        });