feat: migrate Circle component

2020-07-12 15:11:43 +08:00
parent 8c4c51fea1
commit 94ae79d953
12 changed files with 777 additions and 10 deletions
@@ -0,0 +1,126 @@
+# Circle
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-circle v-model:currentRate="currentRate" :rate="30" :speed="100" :text="text" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%';
+    },
+  },
+};
+```
+
+### Custom Width
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :stroke-width="60"
+  text="Custom Width"
+/>
+```
+
+### Custom Color
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  layer-color="#ebedf0"
+  text="Custom Color"
+/>
+```
+
+### Gradient
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :color="gradientColor"
+  text="Gradient"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+      gradientColor: {
+        '0%': '#3fecff',
+        '100%': '#6149f6',
+      },
+    };
+  },
+};
+```
+
+### Counter Clockwise
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :clockwise="false"
+  text="Counter Clockwise"
+/>
+```
+
+### Custom Size
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  size="120px"
+  text="Custom Size"
+/>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:currentRate | Current rate | _number_ | - |
+| rate | Target rate | _number \| string_ | `100` |
+| size | Circle size | _number \| string_ | `100px` |
+| color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` |
+| layer-color | Layer color | _string_ | `white` |
+| fill | Fill color | _string_ | `none` |
+| speed | Animate speed（rate/s） | _number \| string_ | `0` |
+| text | Text | _string_ | - |
+| stroke-width | Stroke width | _number \| string_ | `40` |
+| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` |
+| clockwise | Whether to be clockwise | _boolean_ | `true` |
+
+### Slots
+
+| Name    | Description         |
+| ------- | ------------------- |
+| default | custom text content |