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>

实现效果:

相关推荐
轻口味32 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami35 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda1 小时前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡1 小时前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235952 小时前
web复习(三)
前端
迷糊的『迷』2 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot