【伪元素画三角形】自定义进度条

不吃香菜的蟹老板

已于 2024-03-07 11:52:52 修改

阅读量449

点赞数 9

分类专栏： vue2 文章标签： javascript 前端 elementui

于 2024-03-07 11:33:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35227244/article/details/136527030

版权

本文详细描述了如何在饿了么的进度条基础上，自定义添加一个圆形按钮和进度条文本，并通过JavaScript计算让它们随进度条变化而移动的过程。使用了Vue.js组件和CSS定位实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

饿了么的进度条的样式不能满足设计时，我们需要对进度条进行改造，我这里需要给进度条加一个圆形按钮和进度条文本，并且跟随进度条比例移动。此篇文章用于记录实现过程和思路。
示例如图：
在这里插入图片描述

思路：饿了么的进度条作为基础；自定义圆形按钮定位到进度条中，自定义进度条文本定位到进度条上方，然后将定位的x方向的位移 left 作为变量，就能实现跟随进度条移动啦~

页面准备

首先要画出圆形按钮和进度条文本

<template>
  <div class="outer-container">
    <p>进度条</p>
    <div class="progressBox">
      <!-- 进度条文本 -->
      <div ref="progressTxt" class="rectangle" :class="percent > 80 ? 'txtColor' : ''" :style="`left:${rectLeft}px`">
        {
  { retPercent }}%
      </div>
      <!-- 圆形按钮 -->
      <div class="cicleBox" :style="`left:${cirLeft}

最低0.47元/天解锁文章