进度条组件,根据参数的值,div显示不同的长度

 <div class="node-line" :style="lineProgress"></div>
<script>
    export default {
      name: "trainSummaryInfo",
      data(){
        return{
          linePercentage:200,
        }
      },
      computed:{
        lineProgress(){
          const style = {}
          style.width = this.linePercentage +'px';
          return style
        }
      }
    }
</script>

 

<style >
  .node-line{
    position: absolute;
     width: 60px;
     height: 10px;
     left:20%;
    }
</style>
在style里面定义变量,在计算属性里面,用变量控制width的值
Logo

前往低代码交流专区

更多推荐