环形进度条

src/config.json

@@ -553,6 +553,16 @@
       "sort": "6",
       "showDemo": true,
       "author": "irisSong"
+    },
+    {
+      "version": "1.0.0",
+      "name": "CircleProgress",
+      "chnName": "圆形进度条",
+      "desc": "显示当前任务的操作进度",
+      "type": "component",
+      "sort": "2",
+      "showDemo": true,
+      "author": "zyf"
     }
   ]
 }

src/nutui.js

@@ -106,6 +106,8 @@ import Video from "./packages/video/index.js";
 import "./packages/video/video.scss";
 import Signature from "./packages/signature/index.js";
 import "./packages/signature/signature.scss";
+import CircleProgress from "./packages/circleprogress/index.js";
+import "./packages/circleprogress/circleprogress.scss";
 
 const packages = {
   Cell,
@@ -159,7 +161,8 @@ const packages = {
   TabSelect: TabSelect,
   LuckDraw: LuckDraw,
   Video: Video,
-  Signature: Signature
+  Signature: Signature,
+  CircleProgress: CircleProgress
 };
 
 const components = {};

src/packages/circleprogress/circleprogress.scss

@@ -0,0 +1,9 @@
+.nut-circleprogress{
+    position: relative;
+    .nut-circleprogress-content {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+}

src/packages/circleprogress/circleprogress.vue

@@ -0,0 +1,84 @@
+<template>
+<div class="nut-circleprogress" :style="{height:option.size + 'px' , width:option.size + 'px'}">
+  <svg
+    :height="option.size"
+    :width="option.size"
+    x-mlns="http://www.w3.org/200/svg"
+  >
+    <circle
+      :r="option.radius"
+      :cx="option.cx"
+      :cy="option.cy"
+      :stroke="option.backColor"
+      :stroke-width="option.strokeOutWidth"
+      fill="none"
+    />
+    <circle
+      :r="option.radius"
+      :cx="option.cx"
+      :cy="option.cy"
+      :stroke="option.progressColor"
+      :stroke-dasharray="arcLength"
+      :stroke-width="strokeInnerWidth"
+      fill="none"
+      transform="rotate(-90)"
+      transform-origin="center"
+      stroke-linecap="round"
+    />
+  </svg>
+  <div class="nut-circleprogress-content">
+    <template v-if="!isAuto"><slot>{{progress}}%</slot></template>
+    <template v-else><slot></slot></template>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'nut-circleprogress',
+  props: {
+    progress: {
+      type: [Number , String ] ,
+      required: true,
+    },
+    strokeInnerWidth: {
+      type: [Number , String ] ,
+      default:10
+    },
+    isAuto: {
+      tyep: Boolean,
+      default:false
+    },
+    progressOption: {
+      type: Object,
+      default: () => { },
+    },
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    
+    arcLength () {
+      let circleLength = Math.floor(2 * Math.PI * this.option.radius)
+      let progressLength = (this.progress) / 100 * circleLength
+      // console.log(this.progress,progressLength)
+      return `${progressLength},${circleLength}`
+    },
+    option () {
+      // 所有进度条的可配置项
+      let baseOption = {
+        radius: 50,
+        strokeOutWidth: 10,
+        backColor: '#d9d9d9',
+        progressColor: 'red'
+      }
+      Object.assign(baseOption, this.progressOption)
+      // 圆心位置自动生成
+      baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeOutWidth
+      baseOption.size = (baseOption.radius + baseOption.strokeOutWidth) * 2
+      return baseOption
+    },
+  },
+}
+</script>

src/packages/circleprogress/demo.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="demo-list">
+    <p>基本用法</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="10">
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>环形进度条自定义样式</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="50" :progressOption="progressOption" >
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>环形进度条自定义内容</p>
+    <div>
+      <nut-cell>
+      <span slot="title">
+          <nut-circleprogress :progress="50" :isAuto="isAuto">
+            <slot>自定义</slot>
+          </nut-circleprogress>
+      </span>
+      </nut-cell>
+    </div>
+    <p>动态改变环形进度条的进度</p>
+    <div>
+      <nut-cell>
+        <span slot="title">
+          <nut-circleprogress :progress="percent"  :progressOption="progressOption" :strokeInnerWidth="strokeInnerWidth">
+            
+          </nut-circleprogress>
+        </span>
+      </nut-cell>
+      <nut-cell>
+        <span slot="title">
+          <nut-button type="default" shape="circle" @click="setReduceVal" small>减少</nut-button>
+          <nut-button type="red" shape="circle" @click="setAddVal" small>增加</nut-button>
+        </span>
+      </nut-cell>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+     return {
+        progressOption : {
+          radius: 50,
+          strokeOutWidth:10,
+          backColor: '#d9d9d9',
+          progressColor: 'red',
+        },
+        percent:50, 
+        strokeInnerWidth:10,
+        isAuto:true
+    }
+  },
+  methods: {
+    setAddVal() {
+      this.strokeInnerWidth = 10
+      if(this.percent  >= 100 ) {
+        return
+      }
+      this.percent += 10;
+    },
+    setReduceVal() {
+      if (this.percent - 10 <= 0) {
+        this.strokeInnerWidth = 0
+        this.percent = 0 
+        return;
+      }
+      this.percent -= 10;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/packages/circleprogress/doc.md

@@ -0,0 +1,35 @@
+# CirecleProgress 环形进度条
+
+显示任务的当前操作进度。
+
+## 基本用法
+
+```html
+    
+    <nut-circleprogress progress="10">
+    </nut-circleprogress>
+```
+## 环形进度条自定义样式
+
+```htmL
+    
+    <nut-circleprogress progress="50" :progressOption="progressOption">
+    </nut-circleprogress>
+```
+
+## 环形进度条自定义内容
+
+```htmL
+    
+    <nut-circleprogress progress="50" :isAuto="true">
+    </nut-circleprogress>
+```
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | -----
+| progress | 百分比 | Number,String | 必传项，无默认值
+| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
+| isAuto | 是否自定义内容显示 | Boolean | false
+| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}

src/packages/circleprogress/index.js

@@ -0,0 +1,8 @@
+import CircleProgress from './circleprogress.vue';
+import './circleprogress.scss';
+
+CircleProgress.install = function(Vue) {
+  Vue.component(CircleProgress.name, CircleProgress);
+};
+
+export default CircleProgress

types/nutui.d.ts

@@ -72,3 +72,4 @@ export declare class Popup extends UIComponent {}
 export declare class LuckDraw extends UIComponent {}
 export declare class Video extends UIComponent {}
 export declare class Signature extends UIComponent {}
+export declare class CircleProgress extends UIComponent {}