简单的进度条组件

最新推荐文章于 2024-04-04 09:07:20 发布

VIP文章举头三尺有神农

最新推荐文章于 2024-04-04 09:07:20 发布

阅读量203

点赞数

分类专栏： css 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/M__Yang_/article/details/126162350

版权

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