XCircle

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

x-circle - 图1

二维码

安装

局部注册

全局注册

  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)

基础用法

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

属性

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

插槽

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

相关 issue

贡献者

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

发布日志

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