实现正在生成中的案例，并带有点点点动态效果

生成中后边带点点点动态效果，如图：

 

 

 

 

 

html
<template>
  <view>
    <text>{{ loadingText }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingText: "正在生成中",
      timer: null,
      dots: ""
    };
  },
  mounted() {
    this.startLoadingAnimation();
  },
  methods: {
    startLoadingAnimation() {
      this.timer = setInterval(() => {
        if (this.dots.length === 3) {
          this.dots = "";
        } else {
          this.dots += ".";
        }
      }, 500);
    },
    stopLoadingAnimation() {
      clearInterval(this.timer);
    }
  },
  beforeDestroy() {
    this.stopLoadingAnimation();
  }
};
</script>

<style>
  /* 样式设置，根据需要自行修改 */
  view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
</style>

在上面的示例代码中，首先定义了loadingText用于显示生成中的文本信息，timer用于保存定时器的引用，dots用于保存点的动态效果。在mounted生命周期钩子中，调用startLoadingAnimation方法启动动态效果。在startLoadingAnimation方法中，使用setInterval函数每隔500毫秒更新一次dots，当点的个数达到3个时，将dots重置为空字符串，否则在dots后添加一个点。在beforeDestroy生命周期钩子中，调用stopLoadingAnimation方法停止定时器，以防止内存泄漏。

这样，页面就会显示"正在生成中"的文本，并伴随着点的动态效果，点的个数从1个到3个再循环。你可以根据需要修改样式和文本内容，以适配你的项目。