diff --git a/example/app.json b/example/app.json
index 614fd513..3ad883ba 100644
--- a/example/app.json
+++ b/example/app.json
@@ -125,6 +125,7 @@
"van-picker": "./dist/picker/index",
"van-overlay": "./dist/overlay/index",
"van-circle": "./dist/circle/index",
+ "van-circle-demo": "./dist/circle/demo/index",
"van-index-bar": "./dist/index-bar/index",
"van-index-anchor": "./dist/index-anchor/index",
"van-grid": "./dist/grid/index",
diff --git a/example/pages/circle/index.js b/example/pages/circle/index.js
index 43a23e63..cc11dfda 100644
--- a/example/pages/circle/index.js
+++ b/example/pages/circle/index.js
@@ -1,20 +1,3 @@
import Page from '../../common/page';
-const format = rate => Math.min(Math.max(rate, 0), 100);
-
-Page({
- data: {
- value: 25,
- gradientColor: {
- '0%': '#ffd01e',
- '100%': '#ee0a24'
- }
- },
-
- run(e) {
- const step = parseFloat(e.currentTarget.dataset.step);
- this.setData({
- value: format((this.data.value += step))
- });
- }
-});
+Page();
diff --git a/example/pages/circle/index.wxml b/example/pages/circle/index.wxml
index 02ca4048..29cc62a5 100644
--- a/example/pages/circle/index.wxml
+++ b/example/pages/circle/index.wxml
@@ -1,14 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-增加
-减少
+
diff --git a/packages/circle/demo/index.json b/packages/circle/demo/index.json
new file mode 100644
index 00000000..73065a50
--- /dev/null
+++ b/packages/circle/demo/index.json
@@ -0,0 +1,7 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-circle": "../../circle/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/circle/index.wxss b/packages/circle/demo/index.less
similarity index 82%
rename from example/pages/circle/index.wxss
rename to packages/circle/demo/index.less
index 918284fb..463c5a81 100644
--- a/example/pages/circle/index.wxss
+++ b/packages/circle/demo/index.less
@@ -1,6 +1,6 @@
.van-circle {
margin: 5px 10px 20px;
}
-.van-button{
+.van-button {
margin-left: 10px;
}
diff --git a/packages/circle/demo/index.ts b/packages/circle/demo/index.ts
new file mode 100644
index 00000000..4e134c50
--- /dev/null
+++ b/packages/circle/demo/index.ts
@@ -0,0 +1,22 @@
+import { VantComponent } from '../../common/component';
+
+const format = (rate) => Math.min(Math.max(rate, 0), 100);
+
+VantComponent({
+ data: {
+ value: 25,
+ gradientColor: {
+ '0%': '#ffd01e',
+ '100%': '#ee0a24',
+ },
+ },
+
+ methods: {
+ run(e) {
+ const step = parseFloat(e.currentTarget.dataset.step);
+ this.setData({
+ value: format((this.data.value += step)),
+ });
+ },
+ },
+});
diff --git a/packages/circle/demo/index.wxml b/packages/circle/demo/index.wxml
new file mode 100644
index 00000000..02ca4048
--- /dev/null
+++ b/packages/circle/demo/index.wxml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+增加
+减少
diff --git a/packages/circle/test/__snapshots__/demo.spec.ts.snap b/packages/circle/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..abc97749
--- /dev/null
+++ b/packages/circle/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+ 25%
+
+
+
+
+
+
+
+
+ 样式定制
+
+
+
+
+
+ 宽度定制
+
+
+
+
+
+
+
+ 颜色定制
+
+
+
+
+
+
+
+ 渐变色
+
+
+
+
+
+
+
+ 逆时针
+
+
+
+
+
+
+
+ 大小定制
+
+
+
+
+
+
+ 增加
+
+
+ 减少
+
+
+`;
diff --git a/packages/circle/test/demo.spec.ts b/packages/circle/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/circle/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});