如何定制一款vue进度条组件

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

介绍

本期我们将用css制作一款可以自由定制扩展的vue进度条组件，里面包含vue组件开发与css动画这些知识，面相新来的小伙伴所准备。接下来，我们先康康要做出来的效果吧：

看完后，是不是有点小清新呢，别着急我们这就来做出这个案例来。

正文

1.基本结构

<template>
  <div class="progress-bar">
    <span class="progress-fill" ref="fill" :style="[{'background-color':color}]"></span>
  </div>
</template>
<script>
export default {
  name: "loading",
  props: {
    color: {
      type: String,
      default: "hsl(260, 90%, 70%)"
    },
    value: {
      type: [String, Number],
      default: 0
    }
  },
  mounted() {
      setTimeout(()=>this.render())
  },
  methods: {
    render(){
        this.$refs.fill.style.width = this.value + "%";
    }
  },
};
</script>
复制代码

div.progress-bar作为进度条容器，div.progress-fill作为进度条填充进度。
props目前我们只需要传入两个值，color需要填充的主色，value当前进度条的进度。
render方法去做当前进度（即width）的赋值。并在mounted里要延迟触发，目的是后后面会写css中用到transition，延迟后赋值会让他出现过渡动画。

2.绘制进度

.progress-bar {
  width: 280px;
  background-color: rgb(232, 232, 232);
  height: 42px;
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 6px 2px 12px -2px rgba(0, 0, 0, 0.6);
  .progress-fill {
    display: block;
    height: 100%;
    max-width: 100%;
    width: 0;
    transition: 2s width ease-in-out;
  }
}
复制代码

这里很简单，就是外边进度盒子套了填充进度条，并且div.progress-fill用了transition，现在width是0，当外界传入值后，就会从0执行动画过渡。当然填充进度我们也要用max-width去做一下限制避免溢出。这样一个纯色进度条就做好了，但是这并没有结束，等下我们还要加特技！！

微信截图_20211126232536.png

3.条形动画

我们将要在div.progress-fill做一个不断循环的条形动画，这里就有请伪类after闪亮登场了，将在他里面做文章。

.progress-fill {
&:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
      background-size: 40px 40px;
      animation: loading-line 2s linear infinite;
    }
}
@keyframes loading-line {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}
复制代码

现在就揭晓答案了，我们用了linear-gradient+background-size完成了条形的绘制，其中-45deg是倾斜角度，这个角度不要轻易改变，也算是个障眼法吧相当于把间隔的两个矩形做了倾斜45度正好衔接上，然后再用animation去改变background-position的位置从而达到斜向滚动的视觉效果。

微信截图_20211126233343.png

结语

今天的案例也是非常的简单实用，当然如果自己定制还可以改很多东西比如宽高，边框，形状等等，我这里也算抛砖引玉，希望大家抛弃一些大厂ui库的依赖，有机会完全可以自己实现一套自己或产品设计的认为美观实用的。