XCircle

XCircle

demo 原始链接编辑文档组件源码

x-circle - 图1

二维码

安装

局部注册

全局注册

  1. import { XCircle } from 'vux'
  2. export default {
  3. components: {
  4. XCircle
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { XCircle } from 'vux'
  4. Vue.component('x-circle', XCircle)

Examples基础用法
基础用法

x-circle - 图2

  1. <template>
  2. <div class="vux-circle-demo">
  3. <br>
  4. <div style="width:150px;height:150px;">
  5. <x-circle
  6. :percent="percent"
  7. :stroke-width="5"
  8. stroke-color="#04BE02">
  9. <span>{{ percent }}%</span>
  10. </x-circle>
  11. </div>
  12. <div class="circle-demo-range">
  13. <range v-model="percent" :min="0" :max="100"></range>
  14. </div>
  15. <div style="width:150px;height:150px;">
  16. <x-circle
  17. :percent="percent"
  18. :stroke-width="5"
  19. stroke-color="#04BE02"
  20. anticlockwise>
  21. <span>{{ percent }}%</span>
  22. </x-circle>
  23. </div>
  24. <h4>{{ $t('anticlockwise') }}</h4>
  25. <br>
  26. </div>
  27. </template>
  28. <i18n>
  29. anticlockwise:
  30. zh-CN: 逆时针
  31. </i18n>
  32. <script>
  33. import { XCircle, Range, Icon } from 'vux'
  34. export default {
  35. components: {
  36. XCircle,
  37. Range,
  38. Icon
  39. },
  40. data () {
  41. return {
  42. percent: 50
  43. }
  44. }
  45. }
  46. </script>
  47. <style scoped>
  48. .vux-circle-demo {
  49. text-align: center;
  50. }
  51. .vux-circle-demo > div {
  52. margin-left: auto;
  53. margin-right: auto;
  54. }
  55. .circle-demo-range {
  56. width: 250px;
  57. margin-top: 25px;
  58. margin-bottom: 25px;
  59. }
  60. </style>

x-circle - 图3 Show code

渐变
渐变

x-circle - 图4

  1. <template>
  2. <div class="vux-circle-demo">
  3. <div style='width:100px;height:100px;'>
  4. <x-circle
  5. :percent="percent"
  6. :stroke-width="6"
  7. :trail-width="6"
  8. :stroke-color="['#36D1DC', '#5B86E5']"
  9. trail-color="#ececec">
  10. <span style="color:#36D1DC">{{ percent }}%</span>
  11. </x-circle>
  12. </div>
  13. </div>
  14. </template>
  15. <script>
  16. import { XCircle } from 'vux'
  17. export default {
  18. components: {
  19. XCircle
  20. },
  21. data () {
  22. return {
  23. percent: 80
  24. }
  25. }
  26. }
  27. </script>
  28. <style scoped>
  29. .vux-circle-demo {
  30. padding-top: 20px;
  31. text-align: center;
  32. }
  33. .vux-circle-demo > div {
  34. margin: 0 auto;
  35. }
  36. </style>

x-circle - 图5 Show code

API

属性

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

插槽

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

Issues

相关 issue

贡献者

贡献者

该组件(包含文档)迭代次数 14,贡献人数 5
xmgdtyairylandcomdengspencer1994CuberL

Changelog

发布日志

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