vue 进度条组件的实现

最新推荐文章于 2025-02-25 16:38:21 发布

原创

最新推荐文章于 2025-02-25 16:38:21 发布 · 771 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何在Vue.js中自定义并实现一个进度条组件。内容涉及到Vue版本的进度条实现，以及在uni-app前端框架中的应用，同时提到了可以使用自定义的CSS来风格化组件。

这个是icon 需要换成自己设计的，不像vant2上面的，没有阔以换的

vue 版本：：

<template>
  <div id="progress" :style="{ height: height, width: progressW, background: progressBg }">
    <div id="progress-bar" :style="{ height: height, width: progressBarW, background: progressBarWBg }">
      <img :src="img" :style="{ height: iconHeight, width: iconWidth,top:top }" class="icon-image" v-if="isShowTime">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Progress',
  props: {
    img: {
      type: String,
      default: ''
    },
    isShowTime: {
      type: Boolean,
      default: true
    },
    progressW: {
      type: String,
      default: '220px'
    },
    progressBarW: {
      type: String,
      default: '50%'
    },
    height: {
      type: String,
      default: '0.35rem'
    },
    progressBg: {
      type: String,
      default: '#e5e5e5'
    },
    progressBarWBg: {
      type: String,

最低0.47元/天解锁文章