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

2023-12-14 17:58:30

组件源码

<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%）：

          <ProgressBar :precent="'50'"></ProgressBar>

实现效果：

文章来源:https://blog.csdn.net/gdgztt/article/details/134913770
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。