Vue 纯css方式实现自定义进度条组件

组件源码

javascript 复制代码
<template>
    <div>
        <div class="bar" :style="{'--precent': precent}"></div>
    </div>
  </template>
   
  <script>
  export default {
      name: 'ProgressBar',
      props: {
        precent:{},
      },
      data() {
          return {
          }
      },
      methods: {
        
      }
  }
  </script>

<style scoped>

  .bar{
    height: 14px;
    width: 100%;
    font-size: 10px;
    margin-top: 5px;
    background-color: #f5f5f5;
  }
  .bar::before{
    display: block;
    counter-reset: progress var(--precent); 
    content: '';
    width: calc(1% * var(--precent));
    color: #fff;
    height: 14px;
    background-color: #2486ff;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
  }


</style>
  

调用方式(precent表示占比,这里的50表示是50%):

javascript 复制代码
          <ProgressBar :precent="'50'"></ProgressBar>

实现效果:

相关推荐
LaoZhangAI1 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI1 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou1 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀1 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭2 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
carterwu2 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端
Face2 小时前
promise 规范应用
前端
Mintopia2 小时前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face2 小时前
事件循环
前端·javascript
ONE_Gua2 小时前
chromium魔改——navigator.webdriver 检测
前端·后端·爬虫