Vue2进度条(Progress)

简介: 这篇文章介绍了如何在Vue 3框架中创建一个可自定义设置的进度条组件,包括进度条的宽度、当前进度、线条宽度和是否显示进度信息等属性。

可自定义设置以下属性:

  • 进度条总宽度(width),默认600px
  • 当前进度(progress),默认36
  • 进度条线的宽度(strokeWidth),默认8px
  • 是否显示进度数值或状态图标(showInfo),默认true

效果如下图:

①创建进度条组件Progress.vue:

<template>
  <div class="m-progress" :style="`width:${width}px;`">
    <div class="m-progress-outer">
      <div class="m-progress-inner">
        <div :class="['u-progress-bg', {'u-success-bg': progress >= 100}]" :style="`width: ${progress >= 100 ? 100:progress}%; height: ${strokeWidth}px;`"></div>
      </div>
    </div>
    <template v-if="showInfo"></template>
    <svg class="u-success" v-if="progress>=100" viewBox="64 64 896 896" data-icon="check-circle" aria-hidden="true" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>
    <p class="u-progress-text" v-else>{
  
  { progress>=100 ? 100:progress }}%</p>
  </div>
</template>
<script>
export default {
  name: 'Progress',
  props: {
    width: { // 进度条总宽度
      type: Number,
      default: 600
    },
    progress: { // 当前进度
      type: Number,
      default: 36
    },
    strokeWidth: { // 进度条线的宽度
      type: Number,
      default: 8
    },
    showInfo: { // 是否显示进度数值或状态图标
      type: Boolean,
      default: true
    }
  }
}
</script>
<style lang="less" scoped>
.m-progress {
  height: 24px;
  margin: 0 auto;
  display: flex;
  .m-progress-outer {
    width: 100%;
    .m-progress-inner {
      display: inline-block;
      width: 100%;
      background: #f5f5f5;
      border-radius: 100px;
      .u-progress-bg {
        // background: #1890FF;
        background: linear-gradient(to right, rgb(16, 142, 233), rgb(135, 208, 104));
        border-radius: 100px;
        transition: all .3s cubic-bezier(.08,.82,.17,1);
      }
      .u-success-bg {
        background: #52C41A;
      }
    }
  }
  .u-success {
    width: 16px;
    height: 16px;
    fill: #52C41A;
    margin-left: 8px;
    margin-top: 4px;
  }
  .u-progress-text {
    font-size: 16px;
    line-height: 24px;
    margin-left: 8px;
    color: rgba(0,0,0,.45);
  }
}
</style>

②在要使用的页面引入:

<Progress :width="600" :progress="36" :strokeWidth="10" :showInfo="true" />
import Progress from '@/components/Progress'
components: {
    Progress
}
相关文章
|
6月前
vue3.0 vant popup渲染不出来的解决办法
vue3.0 vant popup渲染不出来的解决办法
108 0
|
3月前
Vue3进度条(Progress)
这是一个基于 Vue2 的进度条组件,支持线性 (`line`) 和圆形 (`circle`) 两种模式。可通过多种属性自定义进度条的样式和行为,包括宽度、进度百分比、颜色、线宽、线帽样式等。此外,还支持显示进度文本或图标,并允许通过插槽自定义内容。该组件提供了丰富的配置选项,适用于多种应用场景。
303 5
Vue3进度条(Progress)
|
3月前
|
JavaScript
Vue3滑动输入条(Slider)
这是一个可高度定制的滑动输入条组件,支持多种配置选项,如宽度、最小值、最大值、是否禁用、双滑块模式等。主要功能包括点击滑动条快速定位并获取数值、拖动滑块调整数值、键盘操作调整数值以及自定义Tooltip显示格式。组件通过监听DOM尺寸变化来动态调整布局,并利用requestAnimationFrame优化动画效果,提供了丰富的交互体验。在线预览和详细代码示例可见[这里](https://themusecatcher.github.io/vue-amazing-ui/guide/components/slider.html)。
Vue3滑动输入条(Slider)
|
3月前
Vue2滑动输入条(Slider)
这是一个基于 Vue3 的滑动输入条(Slider)组件,提供了丰富的自定义选项,如最小值、最大值、初始值、宽度、禁用状态及双滑块模式等。用户可通过拖动滑块或点击输入条调整数值。代码示例展示了如何创建组件及在页面中引入使用。包含单滑块与双滑块模式的效果图。
Vue2滑动输入条(Slider)
|
6月前
|
前端开发
前端进度条组件NProgress
前端进度条组件NProgress
78 1
前端进度条组件NProgress
|
4月前
|
JavaScript
vue 首屏添加加载动画 loading
vue 首屏添加加载动画 loading
77 0
|
6月前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
168 1
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
6月前
|
JavaScript 前端开发 UED
教你用vue自定义指令做一个组件的遮罩层loading效果
教你用vue自定义指令做一个组件的遮罩层loading效果
535 0
|
6月前
|
JavaScript 容器
Vue Better Scroll 无法滚动问题
Vue Better Scroll 无法滚动问题
67 0
|
Web App开发 前端开发 容器