XCircleInstall

安装

Examples
基础用法
基础用法
<template>
  <div class="vux-circle-demo">
    <br>
    <div style="width:150px;height:150px;">
      <x-circle
        :percent="percent"
        :stroke-width="5"
        stroke-color="#04BE02">
        <span>{{ percent }}%</span>
      </x-circle>
    </div>

    <div class="circle-demo-range">
      <range v-model="percent" :min="0" :max="100"></range>
    </div>

    <div style="width:150px;height:150px;">
      <x-circle
        :percent="percent"
        :stroke-width="5"
        stroke-color="#04BE02"
        anticlockwise>
        <span>{{ percent }}%</span>
      </x-circle>
    </div>
    <h4>{{ $t('anticlockwise') }}</h4>
    <br>
  </div>
</template>

<i18n>
anticlockwise:
  zh-CN: 逆时针
</i18n>

<script>
import { XCircle, Range, Icon } from 'vux'

export default {
  components: {
    XCircle,
    Range,
    Icon
  },
  data () {
    return {
      percent: 50
    }
  }
}
</script>

<style scoped>
.vux-circle-demo {
  text-align: center;
}
.vux-circle-demo > div {
  margin-left: auto;
  margin-right: auto;
}
.circle-demo-range {
  width: 250px;
  margin-top: 25px;
  margin-bottom: 25px;
}
</style>



Show code
渐变
渐变
<template>
  <div class="vux-circle-demo">
    <div style='width:100px;height:100px;'>
      <x-circle
        :percent="percent"
        :stroke-width="6"
        :trail-width="6"
        :stroke-color="['#36D1DC', '#5B86E5']"
        trail-color="#ececec">
        <span style="color:#36D1DC">{{ percent }}%</span>
      </x-circle>
    </div>
  </div>
</template>

<script>
import { XCircle } from 'vux'

export default {
  components: {
    XCircle
  },
  data () {
    return {
      percent: 80
    }
  }
}
</script>

<style scoped>
.vux-circle-demo {
  padding-top: 20px;
  text-align: center;
}
.vux-circle-demo > div {
  margin: 0 auto;
}
</style>



Show code
API

属性

名字类型默认值说明版本要求
stroke-widthnumber1线条宽度--
stroke-colorstring
array
#3FC7FA线条颜色,数组时表示渐变--
trail-widthnumber1背景线条宽度--
trail-colorstring#D9D9D9背景线条颜色--
percentnumber0进度百分比--
anticlockwisebooleanfalse按逆时针方向展示百分比--

插槽

名字说明版本要求
默认插槽圆圈中间显示内容--


贡献者

贡献者

该组件(包含文档)迭代次数 13,贡献人数 4

airylandcomdengspencer1994CuberL

Changelog

发布日志

  • v2.9.0 [feature] 支持渐变色 #2616 @spencer1994