vue实现button按钮进度条效果

 首先看html部分，我是通过div绘制按钮样式，并且通过自定义属性设置按钮的大小，也可以动态改变style样式，具体操作看vue官网。

<template>
  <div @click="clickBtn" class="button">
    <Icons
      v-if="isDownload == 'downloading'"
      name="Download"
      class="downloading"
    />
    <Icons
      v-else-if="isDownload == 'downloaded'"
      name="Check"
      class="downloaded"
    />
    <Icons v-else name="Bottom" class="download" />
    <span ref="text" class="text"> download </span>
    <span ref="progressRef" class="propress"></span>
  </div>
</template>

这里的icons组件是我封装的图标组件，内部实现请看我的源码地址：src/components/Icons.vue · 刘紫成/vue3-vite-template - Gitee.comhttps://gitee.com/liu--zicheng/vue3-vite-template/blob/master/src/components/Icons.vue

就是将el-icon组件进行了二次封装，下载按钮动画也在这个项目里。

这个进度条主要通过css实现的，原理：将两个相同大小的盒子，默认是盒子的右上角和第二个盒子的左下角相连如下图，然后设定过度效果以及过度的时间 。

 js部分代码

设计思路：滚动条是不会到达100%的，只有接口请求成功，才会到100%并展示成功的样式，noprogress也差不多是这样的。

let sleep = (time: number) =>
  new Promise((resolve) => setTimeout(() => resolve(1), time));

const clickBtn = async () => {
// 滚动条会滚动不到100%，会等待。
  progressRef.value.classList.add("progress-animate");
  text.value.innerText = "downloading";
  isDownload.value = "downloading";

// 模拟请求，2s后，进度条达到 100%，然后展示成功样式
  const res = await sleep(2000);
  progressRef.value.classList.add("pro-com");
  if (res == 1) {
    isDownload.value = "downloaded";
    progressRef.value.classList.add("complete-animate");
    // text.value.style.color = "#fff";
    text.value.classList.add("download-text");
    text.value.innerText = "downloaded";
  }
};

最后

以上就是拉长板栗为你收集整理的vue实现button按钮进度条效果的全部内容，希望文章能够帮你解决vue实现button按钮进度条效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。