• XCircle
    • 安装
    • 属性
    • 插槽
    • 相关 issue
    • 贡献者
    • 发布日志

    XCircle

    XCircle

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

    x-circle - 图1

    二维码

    • 介绍
    • 安装
    • 栗子
      • 基础用法
      • 渐变
    • API
    • 重要提示及已知问题
    • 贡献者
    • 版本更新
      Install

    安装

    局部注册

    全局注册

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

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

    x-circle - 图5 Show code

    API

    属性

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

    插槽

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

    Issues

    相关 issue

    • #3194 修复x-circle同一个页面重复使用颜色配置问题
    • #2709 x-circle:support show percent anticlockwise
    • #2616 增加XCircle的外圈渐变颜色的配置

    贡献者

    贡献者

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

    Changelog

    发布日志

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