vue 进度条组件的实现

最新推荐文章于 2024-05-31 09:15:00 发布

cv酱

最新推荐文章于 2024-05-31 09:15:00 发布

阅读量630

点赞数

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

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

版权

这个是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