# 进度条

# 基本使用

基本的进度条,您觉得看起来如何呢?

20%
40%
60%
80%
100%

可以使用 gan-progress 标签添加一个基本的进度条,指定 rote 来标注其清大。我们建议您的类型是 Int 型。

<template>
  <div>
    <gan-progress :rote="20" type="error"/>
    <gan-progress :rote="40" type="text"/>
    <gan-progress :rote="60" type="link"/>
    <gan-progress :rote="80" type="warning"/>
    <gan-progress :rote="100" type="success"/>
  </div>
</template>
<script>
export default {
}
</script>
显示代码

# 浮点型

我们对数据做了处理,当您的数据阈不在 0 ~ 100 之间时,我想它并不会产生工作。当然,我也支持您的数值为浮点型。他看起来是比较好的。对数据的精度我想你会有这方面的要求。

20.12%
40.34%
60.82%
80.09%
100%

 












<template>
  <div>
    <gan-progress :rote="20.12" type="error"/>
    <gan-progress :rote="40.34" type="text"/>
    <gan-progress :rote="60.82" type="link"/>
    <gan-progress :rote="80.09" type="warning"/>
    <gan-progress :rote="100" type="success"/>
  </div>
</template>
<script>
export default {
}
</script>
显示代码

# 浮点型

我们对数据做了处理,当您的数据阈不在 0 ~ 100 之间时,我想它并不会产生工作。当然,我也支持您的数值为浮点型。他看起来是比较好的。对数据的精度我想你会有这方面的要求。

20.12%
40.34%
60.82%
80.09%
100%

 












<template>
  <div>
    <gan-progress :rote="20.12" type="error"/>
    <gan-progress :rote="40.34" type="text"/>
    <gan-progress :rote="60.82" type="link"/>
    <gan-progress :rote="80.09" type="warning"/>
    <gan-progress :rote="100" type="success"/>
  </div>
</template>
<script>
export default {
}
</script>
显示代码

# 使用图标

对于状态,可以使用图标对常用状态进行代替

可以使用 icon 属性开启图标显示


 











<template>
  <div>
    <gan-progress :rote="20.12" :icon="true" type="error"/>
    <gan-progress :rote="40.34" :icon="true" type="primary"/>
    <gan-progress :rote="80.09" :icon="true" type="warning"/>
    <gan-progress :rote="100" :icon="true" type="success"/>
  </div>
</template>
<script>
export default {
}
</script>
显示代码

# 宽度

很多时候,宽度并不是我们自己决定的

可以使用 width 属性定义progress的长度


 











<template>
  <div>
    <gan-progress :rote="20.12" :icon="true" width="200px" type="error"/>
    <gan-progress :rote="40.34" :icon="true" width="250px" type="primary"/>
    <gan-progress :rote="80.09" :icon="true" width="300px" type="warning"/>
    <gan-progress :rote="100" :icon="true" width="400px" type="success"/>
  </div>
</template>
<script>
export default {
}
</script>
显示代码

# 行内样式

可以开启行内样式,方便文件上传进度条

20.12%
40.34%
80.09%
100%

可以使用 inLine 属性定义progress的长度


 



















<template>
  <div>
    <div class="line">
      <gan-progress :rote="20.12" :in-line="true" :icon="false" type="error"/>
      <gan-progress :rote="40.34" :in-line="true" :icon="false" type="text"/>
      <gan-progress :rote="60.82" :in-line="true" :icon="false" type="link"/>
      <gan-progress :rote="80.09" :in-line="true" :icon="false" type="warning"/>
      <gan-progress :rote="100" :in-line="true" :icon="false" type="success"/>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style>
  .line > * {
    padding-bottom: 10px;
  }
</style>
显示代码

# 动态模型

我们可以通过v-bind指令为其绑定一个参数,同时对其做更改处理

10%
10%
10%
10%
10%

 





























<template>
  <div>
    <gan-progress :rote="rote" type="error"/>
    <gan-progress :rote="rote" type="text"/>
    <gan-progress :rote="rote" type="link"/>
    <gan-progress :rote="rote" type="warning"/>
    <gan-progress :rote="rote" type="success"/>
      <div>
        <gan-button @click="handleClick('add')">增加</gan-button>
        <gan-button @click="handleClick('last')">减少</gan-button>
      </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    rote: 10
  }),
  methods: {
    handleClick(clickName) {
      switch(clickName) {
        case 'add': this.rote += 10
        break
        case 'last': this.rote -= 10
        break
      }
    }
  }
}
</script>
显示代码
Last Updated: 4/13/2020, 6:07:40 PM