Skip to content
内容大纲
官方QQ交流群
pc端ui:468705115   点此加入
移动端ui:468217742   点此加入
技术交流1:87208295   点此加入
技术交流2:787747122   点此加入
官网
云控制台
开放平台
关注微信公众号
代码仓库: 码云

cv-draw-process 绘制环形进度

简要

绘制环形进度

示例

vue
<template>
  <view>
    <view class="components-title">
      <view class="components-title-t">cv-draw-progress</view>
      <view class="components-title-d">圆形进度</view>
    </view>
    <view>我是一个 圆形进度</view>
    <cv-draw-progress :cBili="cBili" />
    <cv-draw-progress ref="barcode" v-bind="progressAttr" @result="funcDrawResult" />
    <cv-form-base ref="refFormBase">
      <cv-form-item label="进度">
        <cv-input-number v-model="cBili" />
      </cv-form-item>
    </cv-form-base>
  </view>
</template>
<script>
export default {
  data() {
    return {
      cBili: '0',
      progressAttr: {
        val: 'https://cvjs.cn/',
        //   icon: 'https://docs.10yun.com/logo.png',
        icon: '/static/logo.png',
        show: true,
        format: 660,
        cid: 850,
        onval: true,
        loadMake: true
      }
    };
  },
  methods: {
    funcDrawResult(res) {}
  }
};
</script>

属性

属性名类型默认值说明
canvasIdStringcv-draw-progress-canvascanvasId,页面存在多个条形码组件时需设置不同的ID
cSizeNumber80圆的大小 单位px 取偶数
cBackgroundString'#f4f4f4'进度条背景底色
cColorString'#fe9b25'进度条颜色
lineWidthNumber8进度条线的宽度 注意:因为圆的半径设置为画布大小的一半-2 所以注意进度条线的粗细会不会超过圆的大小
cBiliNumber100进度条的占比
cPlaceContentBooleantrue是否显示默认提示内容

感谢

Copyright © 2017 10yun.com | 十云提供计算服务-IPV6 | ctocode组开发