Vue2的自行封装胶囊图组件，通过父组件传值给子组件来改变数值和样式

通过父组件传值给子组件来改变数值和样式

胶囊图组件,子组件占比的百分比就是宽度，在写样式即可

父组件代码块

传变量变量前要加冒号才是表达式

<template>
  <div>
    <Demo 
      label="阿江"
      percent="40%"
      :width="width"
    ></Demo>
  </div>
</template>

<script>
  import Demo from '@/components/Demo.vue'
  export default {
    name: 'HelloWorld',
    data () {
        return {
            width:'90%'
        }
    },
    components:{
      Demo
    }
  }
  </script>

  <style lang="scss" scoped>

  </style>

子组件代码

<template>
    <div class="container">
        <div class="label">
            <span class="Name">{{label}}</span>
            <div class="percent">
                 <div class="progress" :style="'width:'+width">
                    <div class="star"></div>
                 </div>
            </div>
            <span class="Value">{{percent}}</span>
        </div>
    </div>
</template>
  
<script>
  export default {
    props:['label','width','percent'],
    data() {
      return {
        
      }
    }
  }
</script>

<style  scoped>
.container .label{
  position: relative;
  display: flex;
  margin: 20px 0;
  padding: 24px 10px 18px;
  background:black;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #000;
  transition: 0.5s;
}
.container .label .Name{
  position: relative;
  width: 120px;
  text-align: right;
  color: #fff;
  margin-top: -2px;
  text-transform: uppercase;
}
.container .label .Value{
  position: relative;
  width: 40px;
  text-align: right;
  color: #fff;
  margin-top: -2px;
  text-transform: uppercase;
}
.container .label .percent{
  position: relative;
  width: 200px;
  border: 2px solid rgba(166, 244, 245, .5);
  border-top: none;
  margin: 0 10px;
  border-radius:8px 8px 1px 1px;
  overflow: hidden;
  padding: 0px 2px;
}
.container .label .percent .progress{
  position: relative;
  top: 50%;
  left: 0;
  transform: translate(0,-50%);
  height: 30%;
  width: 95%;
  background: #a4f4f5;
  border-radius: 10px;
  box-shadow:0px 0px 4px 2px #a4f4f5;
  animation: animate 3s ease-in-out forwards;
}
.container .label .percent .progress .star{
  position: absolute;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  box-shadow:-2px -2px 4px 4px #4269f6;
  background:radial-gradient(#d4d8d8ab, #3863ff);
  right: 0;
  top: 50%;
  transform: translate(0,-50%);
}
@keyframes animate {
  from{
    width: 0;
  }
}
</style>