diff --git a/components/rate/demo/rate.vue b/components/rate/demo/rate.vue
new file mode 100644
index 000000000..31f3a2fe3
--- /dev/null
+++ b/components/rate/demo/rate.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    基本
+    <Rate class="custom"></Rate>
+    </br>
+    半星
+    <Rate :allowHalf="allowHalf"></Rate>
+    </br>
+    默认3颗星
+    <Rate v-model="initValue"></Rate>
+    <AntButton type="primary" @click="changeValue">改变</AntButton>
+    <AntButton type="primary" @click="getValue">当前值</AntButton>
+    </br>
+    只读
+    <Rate :value="initValue" :disabled="disabled"></Rate>
+    </br>
+    回调函数
+    <Rate
+      :onChange="onChange"
+      :onHoverChange="onHoverChange"></Rate>
+    <span v-if="hoverValue">{{hoverValue}}stars</span>
+    <span v-if="rValue">{{rValue}}stars</span>
+    <br/>
+    <Rate
+      :allowHalf="allowHalf"
+      :onHoverChange="onHoverChangeAH"></Rate>
+    <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
+    </br>
+    自定义
+    <Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
+  </div>
+</template>
+<script>
+import '../style'
+import { Rate, Icon, Button } from 'antd/index'
+export default {
+  data () {
+    return {
+      allowHalf: true,
+      initValue: 3,
+      disabled: true,
+      hoverValue: undefined,
+      rValue: undefined,
+      hoverValueAH: undefined,
+      character: '好',
+    }
+  },
+  methods: {
+    onHoverChange (val) {
+      this.hoverValue = val
+    },
+    onChange (val) {
+      this.rValue = val
+    },
+    onHoverChangeAH (val) {
+      this.hoverValueAH = val
+    },
+    changeValue () {
+      this.initValue = undefined
+    },
+    getValue () {
+      console.log(this.initValue)
+    },
+  },
+  components: {
+    Rate,
+    Icon,
+    AntButton: Button,
+  },
+}
+</script>
diff --git a/components/util/util.js b/components/util/util.js
index 6d0070323..bef8da463 100644
--- a/components/util/util.js
+++ b/components/util/util.js
@@ -1,40 +1,39 @@
-function getScroll(w, top) {
-  let ret = top ? w.pageYOffset : w.pageXOffset;
-  const method = top ? 'scrollTop' : 'scrollLeft';
+function getScroll (w, top) {
+  let ret = top ? w.pageYOffset : w.pageXOffset
+  const method = top ? 'scrollTop' : 'scrollLeft'
   if (typeof ret !== 'number') {
-    const d = w.document;
+    const d = w.document
     // ie6,7,8 standard mode
-    ret = d.documentElement[method];
+    ret = d.documentElement[method]
     if (typeof ret !== 'number') {
       // quirks mode
-      ret = d.body[method];
+      ret = d.body[method]
     }
   }
-  return ret;
+  return ret
 }
 
-function getClientPosition(elem) {
-  let box;
-  let x;
-  let y;
-  const doc = elem.ownerDocument;
-  const body = doc.body;
-  const docElem = doc && doc.documentElement;
-  box = elem.getBoundingClientRect();
-  x = box.left;
-  y = box.top;
-  x -= docElem.clientLeft || body.clientLeft || 0;
-  y -= docElem.clientTop || body.clientTop || 0;
+function getClientPosition (elem) {
+  let x
+  let y
+  const doc = elem.ownerDocument
+  const body = doc.body
+  const docElem = doc && doc.documentElement
+  const box = elem.getBoundingClientRect()
+  x = box.left
+  y = box.top
+  x -= docElem.clientLeft || body.clientLeft || 0
+  y -= docElem.clientTop || body.clientTop || 0
   return {
     left: x,
     top: y,
-  };
+  }
 }
 
 export const getOffsetLeft = (el) => {
-  const pos = getClientPosition(el);
-  const doc = el.ownerDocument;
-  const w = doc.defaultView || doc.parentWindow;
-  pos.left += getScroll(w);
-  return pos.left;
+  const pos = getClientPosition(el)
+  const doc = el.ownerDocument
+  const w = doc.defaultView || doc.parentWindow
+  pos.left += getScroll(w)
+  return pos.left
 }