[new feature] add Circle component (#608)

docs/demos/common.js

@@ -31,6 +31,8 @@ Vue.component('demo-section', DemoSection);
 
 Locale.add({
   'zh-CN': {
+    add: '增加',
+    decrease: '减少',
     red: '红色',
     orange: '橙色',
     yellow: '黄色',
@@ -56,6 +58,8 @@ Locale.add({
     passwordPlaceholder: '请输入密码'
   },
   'en-US': {
+    add: 'Add',
+    decrease: 'Decrease',
     red: 'Red',
     orange: 'Orange',
     yellow: 'Yellow',

docs/demos/index.js

@@ -31,6 +31,7 @@ export default {
   'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),
   'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
   'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
+  'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
   'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
   'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
   'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),

docs/demos/views/circle.vue

@@ -0,0 +1,78 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-circle
+        v-model="currentRate1"
+        :rate="rate"
+        :speed="100"
+        size="120px"
+        :text="currentRate1.toFixed(0) + '%'"
+      />
+      <van-circle
+        v-model="currentRate2"
+        color="#13ce66"
+        fill="#fff"
+        :rate="rate"
+        size="120px"
+        layer-color="#eee"
+        :speed="100"
+        :stroke-width="60"
+        :clockwise="false"
+        :text="currentRate2.toFixed(0) + '%'"
+      />
+      <div>
+        <van-button :text="$t('add')" type="primary" size="small" @click="add" />
+        <van-button :text="$t('decrease')" type="danger" size="small" @click="reduce" />
+      </div>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+const format = rate => Math.min(Math.max(rate, 0), 100);
+
+export default {
+  i18n: {
+    'zh-CN': {
+      title2: '样式定制'
+    },
+    'en-US': {
+      title2: 'Custom Style'
+    }
+  },
+
+  data() {
+    return {
+      rate: 30,
+      currentRate1: 0,
+      currentRate2: 0
+    };
+  },
+
+  methods: {
+    add() {
+      this.rate = format(this.rate + 20);
+    },
+
+    reduce() {
+      this.rate = format(this.rate - 20);
+    }
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-circle {
+  .van-circle {
+    margin-left: 15px;
+  }
+
+  .van-button {
+    margin: 15px 0 0 10px;
+
+    &:first-of-type {
+      margin-left: 15px;
+    }
+  }
+}
+</style>