简单的进度条组件

最新推荐文章于 2026-02-01 02:05:13 发布

原创最新推荐文章于 2026-02-01 02:05:13 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何创建并使用一个名为scrollBar.vue的子组件，该组件在前端项目中作为进度条展示滚动进度。通过在父组件中引入这个子组件，可以轻松实现页面滚动时的视觉反馈效果。

scrollBar.vue 子组件

<template>
  <!-- 进度条组件 -->
  <div class="scrollBar" :style="{ width: scrollWidth }">
    <div class="scrollBar_process" :style="{ width: width + '%' }">
      <div
        class="process"
        :class="[
          backgroundColor == 0
            ? 'process_ative'
            : backgroundColor == 1
            ? 'process_ative2'
            : backgroundColor == 2
            ? 'process_ative3'
            : '',
        ]"
      ></div>
      <div
        class="dot"
        v-if="width != 0"
        :class="[
          backgroundColor == 0
            ? 'dot_ative'
            : backgroundColor == 1
            ? 'dot_ative2'
            : backgroundColor == 2
            ? 'dot_ative3'
            : '',
        ]"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    height: {
      type: String,
      default() {
        return "8px";
      },
    },
    width: {
      type: String,
      default() {
        return "80";
      },
    },
    scrollWidth: {
      type: String,
      default() {
        return "360px";
      },
    },
    backgroundColor: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {};
  },
  watch: {
    width(e) {
      console.log(e);
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang='scss'>
.scrollBar {
  height: 2px;
  background: rgba(2, 77, 182, 0.7);
  // opacity: 0.33;
  position: relative;
  .scrollBar_process {
    position: absolute;
    top: -1px;
    width: 80%;
    height: 4px;
    display: flex;
    .process {
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(37, 166, 255, 0.3) 0%,
        #25a6ff 100%
      );
    }
    .process_ative {
      background: linear-gradient(
        90deg,
        rgba(250, 102, 102, 0.19) 0%,
        #ff6767 100%
      );
      opacity: 0.99;
    }
    .process_ative2 {
      background: linear-gradient(
        90deg,
        rgba(255, 230, 81, 0.14) 0%,
        #fdde45 100%
      );
      opacity: 0.99;
    }
    .process_ative3 {
      background: linear-gradient(
        90deg,
        rgba(148, 255, 83, 0.09) 0%,
        #73ff25 100%
      );
      opacity: 0.99;
    }
    .dot {
      margin-top: -2px;
      box-shadow: 0px 0px 2px 6px rgba(35, 157, 242, 0.3);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #24a1f9;
    }
    .dot_ative {
      background-color: rgba(255, 103, 103, 1);
      box-shadow: 0px 0px 2px 6px rgba(255, 103, 103, 0.3);
    }
    .dot_ative2 {
      background-color: rgba(241, 212, 71, 1);
      box-shadow: 0px 0px 2px 6px rgba(241, 212, 71, 0.3);
    }
    .dot_ative3 {
      background-color: rgba(97, 229, 77, 1);
      box-shadow: 0px 0px 2px 6px rgba(97, 229, 77, 0.3);
    }
  }
}
</style>

父组件引入使用：

 <scroll-bar
          :width="(item.num / Percentage) * 100 + ''"
          :backgroundColor="index"
          :scrollWidth="'350px'"
        ></scroll-bar>

// scrollWidth:宽度
// backgroundColor 进度条颜色 参数 1，2，3 
// width 进度