VUE简易进度条组件封装

最新推荐文章于 2022-09-21 00:41:21 发布

卖桃酥

最新推荐文章于 2022-09-21 00:41:21 发布

阅读量877

点赞数

文章标签： vue 组件化 echarts

本文链接：https://blog.csdn.net/MetalSQueen/article/details/112323338

版权

本文记录了在前端项目中遇到的特殊进度条需求，由于现有组件库无法满足，作者选择自封装Vue组件来实现。组件包含HTML、JS和CSS代码，允许左右进度条显示并调整透明度。在开发过程中，作者经历了从单侧到双侧进度条的改进，以及后续发现更适合使用Echarts实现，强调了组件封装的灵活性和查阅文档的重要性。

摘要由CSDN通过智能技术生成

需求

今天做项目的时候遇到一个需求，左右方向都要有的进度条，并且背景需要是半透明的，查看各组件库没有符合需求的，只能自己动手撸一个。

具体代码

具体的页面结构是这样的，还是很简单的，就是大div套小div控制长度，第一版写的时候是左右分开显示，设定一个值来控制是左侧还是右侧的进度条，后面发现因为中间还要显示月份，不好对齐，所以改成了下面这版。

html代码

<template>
    <div class="big-box">
        <div class="out">
            <div class="in" :style="{
      'width':linelwidth+'%'}"></div>
        </div>
        <b>{
  {mothNumber}}月</b>
        <div class="out-green">
            <div class="in-green" :style="{
      'width':linerwidth+'%'}"></div>
        </div>
    </div>    
</template>