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

·  阅读 1076
如何定制一款vue进度条组件

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

介绍

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

VID_20211126_212712.gif

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

正文

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库的依赖,有机会完全可以自己实现一套自己或产品设计的认为美观实用的。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改