vue 进度条组件的实现

最新推荐文章于 2024-08-20 11:35:49 发布

cv酱

最新推荐文章于 2024-08-20 11:35:49 发布

阅读量678

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yinguser/article/details/126784770

版权

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

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

这个是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: {
      ty