欺骗加载进度条,应用于无法监听接口数据传输进度的情况

html 复制代码
<template>
  <div :class="$options.name">
    <el-button type="primary" @click="fakeLoading">开始加载</el-button>

    <el-progress
      style="width: 100%; height: 30px"
      v-if="percentage"
      type="line"
      :percentage="percentage"
      :show-text="true"
      :stroke-width="5"
      :text-inside="false"
      :color="'#409EFF'"
      :define-back-color="'#eee'"
    />
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      interval: null,
      percentage: 0,
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    fakeLoading({ cb } = {}) {
      this.closeFakeLoading();
      this.interval = setInterval(() => {
        if (this.percentage >= 99) {
          clearInterval(this.interval);
          cb && cb();
        } else this.percentage += 1;
      }, 100);
    },
    closeFakeLoading(d) {
      clearInterval(this.interval);
      this.percentage = 0;
    },
  },
};
</script>

模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果https://blog.csdn.net/qq_37860634/article/details/100147738

相关推荐
不在逃避q26 分钟前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm
夏殇之殁41 分钟前
包中创建自定义列表项。 . 使用自定义列表项进行数据绑定 . 将天气预报数据保存到本地内存表,通过LiveBindings进行显示。 ...
服务器·前端·javascript
The Chosen One9851 小时前
高进度算法模板速记(待完善)
java·前端·算法
陈随易1 小时前
MoonBit抓包模块pcap,查看电脑的每一次联网通信
前端·后端·程序员
新中地GIS开发老师2 小时前
WebGIS开发学生作品|低空航天管理与航线规划系统
前端·javascript·webgis·三维gis开发
用户059540174462 小时前
大模型对话记忆持久化踩坑实录:用 Playwright 自动化测了 300 次,终于揪出会话丢失的真凶
前端·css
丙氨酸長鏈2 小时前
Web前端入门第 问:JavaScript 一个简单的 IndexedDB 数据库入门示例
前端·javascript·数据库
kyriewen3 小时前
面试官让我手写虚拟列表——AI生成的版本,快速滚动几下就白屏了
前端·javascript·面试
IT_陈寒3 小时前
Vite热更新失效?你可能漏了这个配置
前端·人工智能·后端
梅孔立4 小时前
两种免费的翻译API调用方式详解 - Edge官方API与个人缓存服务
前端·缓存·edge