diff --git a/components/pagination/Pagination.vue b/components/pagination/Pagination.vue
index 15e95a2f6..b2db32425 100644
--- a/components/pagination/Pagination.vue
+++ b/components/pagination/Pagination.vue
@@ -1,66 +1,39 @@
 <script>
-import Button from '../button/index'
-import Pager from './Pager'
-import Options from './Options'
-import locale from './locale/zh_CN'
-import KEYCODE from './KeyCode'
+import PropTypes from '../_util/vue-types'
+import VcSelect from '../select'
+import enUS from '../vc-pagination/locale/en_US'
+import LocaleReceiver from '../locale-provider/LocaleReceiver'
+import { getOptionProps } from '../_util/props-util'
+import VcPagination from '../vc-pagination'
 
-// 是否是正整数
-function isInteger (value) {
-  return typeof value === 'number' &&
-    isFinite(value) &&
-    Math.floor(value) === value
-}
-
-function defaultItemRender (page, type, element) {
-  return element
+export const PaginationProps = {
+  total: PropTypes.number,
+  defaultCurrent: PropTypes.number,
+  current: PropTypes.number,
+  defaultPageSize: PropTypes.number,
+  pageSize: PropTypes.number,
+  hideOnSinglePage: PropTypes.bool,
+  showSizeChanger: PropTypes.bool,
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ])),
+  showSizeChange: PropTypes.func,
+  showQuickJumper: PropTypes.bool,
+  showTotal: PropTypes.any,
+  size: PropTypes.string,
+  simple: PropTypes.bool,
+  locale: PropTypes.object,
+  prefixCls: PropTypes.string,
+  selectPrefixCls: PropTypes.string,
+  itemRender: PropTypes.any,
 }
 
 export default {
-  name: 'Pagination',
   props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-pagination',
-    },
-    current: {
-      type: [Number, String],
-      default: 1,
-    },
-    total: {
-      type: [Number, String],
-      default: 0,
-    },
-    pageSize: {
-      type: [Number, String],
-      default: 10,
-    },
-    showSizeChanger: {
-      type: Boolean,
-      default: false,
-    },
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '20', '30', '40'],
-    },
-    showQuickJumper: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-    simple: Boolean,
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
-    showTotal: Function,
-    itemRender: {
-      type: Function,
-      default: defaultItemRender,
-    },
+    ...PaginationProps,
+    prefixCls: PropTypes.string.def('ant-pagination'),
+    selectPrefixCls: PropTypes.string.def('ant-select'),
   },
   model: {
     prop: 'current',
@@ -72,393 +45,35 @@ export default {
     }
   },
   methods: {
-    isValid (page) {
-      return isInteger(page) && page >= 1 && page !== this.stateCurrent
-    },
-    calculatePage (p) {
-      let pageSize = p
-      if (typeof pageSize === 'undefined') {
-        pageSize = this.pageSize
+    renderPagination (locale) {
+      const { size, ...restProps } = getOptionProps(this)
+      const isSmall = size === 'small'
+      const paginationProps = {
+        props: {
+          ...restProps,
+          selectComponentClass: VcSelect,
+          locale,
+        },
+        class: {
+          'mini': isSmall,
+        },
+        on: this.$listeners,
       }
-      return Math.floor((this.total - 1) / pageSize) + 1
-    },
-    handleGoTO (event) {
-      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
-        this.handleChange(this.stateCurrent)
-      }
-    },
-    prev () {
-      if (this.hasPrev()) {
-        this.handleChange(this.stateCurrent - 1)
-      }
-    },
-    next () {
-      if (this.hasNext()) {
-        this.handleChange(this.stateCurrent + 1)
-      }
-    },
-    hasPrev () {
-      return this.stateCurrent > 1
-    },
-    hasNext () {
-      return this.stateCurrent < this.calculatePage()
-    },
-    handleKeyDown (event) {
-      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
-        event.preventDefault()
-      }
-    },
-    handleKeyUp (event) {
-      const inputValue = event.target.value
-      const stateCurrent = this.stateCurrent
-      let value
 
-      if (inputValue === '') {
-        value = inputValue
-      } else if (isNaN(Number(inputValue))) {
-        value = stateCurrent
-      } else {
-        value = Number(inputValue)
-      }
-      event.target.value = value
-
-      if (event.keyCode === KEYCODE.ENTER) {
-        this.handleChange(value)
-      } else if (event.keyCode === KEYCODE.ARROW_UP) {
-        this.handleChange(value - 1)
-      } else if (event.keyCode === KEYCODE.ARROW_DOWN) {
-        this.handleChange(value + 1)
-      }
+      return (
+        <VcPagination
+          {...paginationProps}
+        />
+      )
     },
-    handleChange (p) {
-      let page = p
-      if (this.isValid(page)) {
-        const allTotal = this.calculatePage()
-        if (page > allTotal) {
-          page = allTotal
-        }
-        this.stateCurrent = page
-        this.$emit('input', page)
-        this.$emit('change', page, this.pageSize)
-        return page
-      }
-      return this.stateCurrent
-    },
-    runIfEnter (event, callback, ...restParams) {
-      if (event.key === 'Enter' || event.charCode === 13) {
-        callback(...restParams)
-      }
-    },
-    runIfEnterPrev (event) {
-      this.runIfEnter(event, this.prev)
-    },
-    runIfEnterNext (event) {
-      this.runIfEnter(event, this.next)
-    },
-    runIfEnterJumpPrev (event) {
-      this.runIfEnter(event, this.jumpPrev)
-    },
-    runIfEnterJumpNext (event) {
-      this.runIfEnter(event, this.jumpNext)
-    },
-    getJumpPrevPage () {
-      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
-    },
-    getJumpNextPage () {
-      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
-    },
-    jumpPrev () {
-      this.handleChange(this.getJumpPrevPage())
-    },
-    jumpNext () {
-      this.handleChange(this.getJumpNextPage())
-    },
-  },
-  watch: {
-    current (val) {
-      this.stateCurrent = +val
-    },
-  },
-  components: {
-    vcButton: Button,
-    Pager,
   },
   render () {
-    const prefixCls = this.prefixCls
-    const allPages = this.calculatePage()
-    const pagerList = []
-    let jumpPrev = null
-    let jumpNext = null
-    let firstPager = null
-    let lastPager = null
-    let gotoButton = null
-
-    const goButton = this.showQuickJumper
-    const pageBufferSize = this.showLessItems ? 1 : 2
-    const { stateCurrent, pageSize } = this
-    const smallClass = this.size === 'small' ? 'mini' : ''
-    const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0
-    const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages
-
-    if (this.simple) {
-      if (goButton) {
-        if (typeof goButton === 'boolean') {
-          gotoButton = (
-            <li
-              title={this.showTitle ? `${locale.jump_to}${stateCurrent}/${allPages}` : null}
-              class={`${prefixCls}-simple-pager`}
-            >
-              <vc-button
-                onClick={this.handleGoTO}
-                onKeyup={this.handleGoTO}
-              >
-                {locale.jump_to_confirm}
-              </vc-button>
-            </li>
-          )
-        } else {
-          gotoButton = goButton
-        }
-      }
-      return (
-        <ul class={`${prefixCls} ${prefixCls}-simple ${smallClass}`}>
-          <li
-            title={this.showTitle ? locale.prev_page : null}
-            onClick={this.prev}
-            tabIndex='0'
-            onKeypress={this.runIfEnterPrev}
-            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
-            aria-disabled={!this.hasPrev()}
-          >
-            {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
-          </li>
-          <li
-            title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
-            class={`${prefixCls}-simple-pager`}
-          >
-            <input
-              type='text'
-              value={this.stateCurrent}
-              onKeydown={this.handleKeyDown}
-              onKeyup={this.handleKeyUp}
-              onChange={this.handleKeyUp}
-              size='3'
-            />
-            <span class={`${prefixCls}-slash`}>／</span>
-            {allPages}
-          </li>
-          <li
-            title={this.showTitle ? locale.next_page : null}
-            onClick={this.next}
-            tabIndex='0'
-            onKeypress={this.runIfEnterNext}
-            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
-            aria-disabled={!this.hasNext()}
-          >
-            {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
-          </li>
-          {gotoButton}
-        </ul>
-      )
-    }
-
-    if (allPages <= 5 + pageBufferSize * 2) {
-      for (let i = 1; i <= allPages; i++) {
-        const active = stateCurrent === i
-        pagerList.push(
-          <Pager
-            rootPrefixCls={this.prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
-            key={i}
-            page={i}
-            active={active}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
-          />
-        )
-      }
-    } else {
-      const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
-      const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
-      jumpPrev = (
-        <li
-          title={this.showTitle ? prevItemTitle : null}
-          key='prev'
-          onClick={this.jumpPrev}
-          tabIndex='0'
-          onKeypress={this.runIfEnterJumpPrev}
-          class={`${prefixCls}-jump-prev`}
-        >
-          {this.itemRender(
-            this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} />
-          )}
-        </li>
-      )
-      jumpNext = (
-        <li
-          title={this.showTitle ? nextItemTitle : null}
-          key='next'
-          tabIndex='0'
-          onClick={this.jumpNext}
-          onKeypress={this.runIfEnterJumpNext}
-          class={`${prefixCls}-jump-next`}
-        >
-          {this.itemRender(
-            this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} />
-          )}
-        </li>
-      )
-      lastPager = (
-        <Pager
-          rootPrefixCls={prefixCls}
-          onClick={this.handleChange}
-          onKeypress={this.runIfEnter}
-          key={allPages}
-          page={allPages}
-          active={false}
-          showTitle={this.showTitle}
-          itemRender={this.itemRender}
-        />
-      )
-      firstPager = (
-        <Pager
-          rootPrefixCls={prefixCls}
-          onClick={this.handleChange}
-          onKeypress={this.runIfEnter}
-          key={1}
-          page={1}
-          active={false}
-          showTitle={this.showTitle}
-          itemRender={this.itemRender}
-        />
-      )
-
-      let left = Math.max(1, stateCurrent - pageBufferSize)
-      let right = Math.min(stateCurrent + pageBufferSize, allPages)
-
-      if (stateCurrent - 1 <= pageBufferSize) {
-        right = 1 + pageBufferSize * 2
-      }
-
-      if (allPages - stateCurrent <= pageBufferSize) {
-        left = allPages - pageBufferSize * 2
-      }
-
-      for (let i = left; i <= right; i++) {
-        const active = stateCurrent === i
-        pagerList.push(
-          <Pager
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
-            key={i}
-            page={i}
-            active={active}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
-          />
-        )
-      }
-
-      if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
-        pagerList[0] = (
-          <Pager
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
-            key={left}
-            page={left}
-            className={`${prefixCls}-item-after-jump-prev`}
-            active={false}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
-          />
-        )
-        pagerList.unshift(jumpPrev)
-      }
-      if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
-        pagerList[pagerList.length - 1] = (
-          <Pager
-            rootPrefixCls={prefixCls}
-            onClick={this.handleChange}
-            onKeypress={this.runIfEnter}
-            key={right}
-            page={right}
-            className={`${prefixCls}-item-before-jump-next`}
-            active={false}
-            showTitle={this.showTitle}
-            itemRender={this.itemRender}
-          />
-        )
-        pagerList.push(jumpNext)
-      }
-
-      if (left !== 1) {
-        pagerList.unshift(firstPager)
-      }
-      if (right !== allPages) {
-        pagerList.push(lastPager)
-      }
-    }
-
-    let totalText = null
-
-    if (this.showTotal) {
-      totalText = (
-        <li class={`${prefixCls}-total-text`}>
-          {this.showTotal(
-            this.total,
-            [
-              (stateCurrent - 1) * pageSize + 1,
-              stateCurrent * pageSize > this.total ? this.total : stateCurrent * pageSize,
-            ]
-          )}
-        </li>
-      )
-    }
-    const prevDisabled = !this.hasPrev()
-    const nextDisabled = !this.hasNext()
     return (
-      <ul
-        class={`${prefixCls} ${smallClass}`}
-        unselectable='unselectable'
-      >
-        {totalText}
-        <li
-          title={this.showTitle ? locale.prev_page : null}
-          onClick={this.prev}
-          tabIndex='0'
-          onKeypress={this.runIfEnterPrev}
-          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
-          aria-disabled={prevDisabled}
-        >
-          {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
-        </li>
-        {pagerList}
-        <li
-          title={this.showTitle ? locale.next_page : null}
-          onClick={this.next}
-          tabIndex='0'
-          onKeypress={this.runIfEnterNext}
-          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
-          aria-disabled={nextDisabled}
-        >
-          {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
-        </li>
-        <Options
-          locale={locale}
-          rootPrefixCls={prefixCls}
-          selectComponentClass={this.selectComponentClass}
-          selectPrefixCls={this.selectPrefixCls}
-          changeSize={this.showSizeChanger ? this.changePageSize : null}
-          current={stateCurrent}
-          pageSize={pageSize}
-          pageSizeOptions={this.pageSizeOptions}
-          quickGo={this.showQuickJumper ? this.handleChange : null}
-          goButton={goButton}
-        />
-      </ul>
+      <LocaleReceiver
+        componentName='Pagination'
+        defaultLocale={enUS}
+        children={this.renderPagination}
+      />
     )
   },
 }
diff --git a/components/pagination/demo/index.vue b/components/pagination/demo/index.vue
index 7770b7f9b..431316185 100644
--- a/components/pagination/demo/index.vue
+++ b/components/pagination/demo/index.vue
@@ -1,42 +1,42 @@
 <template>
   <div>
     基本
-    <Pagination current=1 total=50 />
-    </br>
+    <Pagination :current="1" :total="50" />
+    <br>
     更多
-    <Pagination :current="6" total=500 />
-    </br>
+    <Pagination :current="6" :total="500" />
+    <br>
     简洁
     <div style="margin-bottom:10px">
       <pagination :simple="simple" :current="5" :total="total"></pagination>
     </div>
-    </br>
+    <br>
     改值操作
     <div style="margin-bottom:10px">
       <pagination :current="current" :total="total" @change="onchange"></pagination>
       <vc-button @click="changeValue">改值</vc-button>
     </div>
-    </br>
+    <br>
     双向绑定
     <div>
       <pagination v-model="current" :total="total" :showTotal="showTotal"></pagination>
       <vc-button @click="getValue">当前值</vc-button>
     </div>
-    </br>
+    <br>
     迷你
-    <Pagination :current="1" total=50 size="small"/>
-    <Pagination :current="1" total=50 :showTotal="showTotal" size="small"/>
-    </br>
+    <Pagination :current="1" :total="50" size="small"/>
+    <Pagination :current="1" :total="50" :showTotal="showTotal" size="small"/>
+    <br>
     总数
-    <Pagination :current="1" total=50 :showTotal="showTotal"/>
-    <Pagination :current="1" total=50 :showTotal="showTotal1"/>
-    </br>
+    <Pagination :current="1" :total="50" :showTotal="showTotal"/>
+    <Pagination :current="1" :total="50" :showTotal="showTotal1"/>
+    <br>
     跳转
-    <Pagination v-model="current" total=50 :showQuickJumper="showQuickJumper"/>
+    <Pagination v-model="current" :total="50" :showQuickJumper="showQuickJumper"/>
     <vc-button @click="getValue">当前值</vc-button>
-    </br>
+    <br>
     上一步下一步
-    <Pagination total=500 :itemRender="itemRender" />
+    <Pagination :total="500" :itemRender="itemRender" />
   </div>
 </template>
 <script>
diff --git a/components/pagination/index.js b/components/pagination/index.js
index 146641219..c222c5f1d 100644
--- a/components/pagination/index.js
+++ b/components/pagination/index.js
@@ -1,3 +1,4 @@
 import Pagination from './Pagination'
 
+export { PaginationProps } from './Pagination'
 export default Pagination
diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 703879770..ebd8655e2 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -45,7 +45,7 @@
     border: @border-width-base @border-style-base @border-color-base;
     background-color: @component-background;
     margin-right: 8px;
-    font-family: Arial;
+    font-family: @pagination-font-family;
     outline: 0;
 
     a {
@@ -134,7 +134,7 @@
   &-next,
   &-jump-prev,
   &-jump-next {
-    font-family: Arial;
+    font-family: @pagination-font-family;
     cursor: pointer;
     color: @text-color;
     border-radius: @border-radius-base;
diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md
index b9c347cd1..6fd737aa7 100644
--- a/components/switch/index.en-US.md
+++ b/components/switch/index.en-US.md
@@ -3,7 +3,7 @@
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | autoFocus | get focus when component mounted | boolean | false |
-| checked | determine whether the `Switch` is checked | boolean | false |
+| checked(v-model) | determine whether the `Switch` is checked | boolean | false |
 | checkedChildren | content to be shown when the state is checked | string\|slot |  |
 | defaultChecked | to set the initial state | boolean | false |
 | disabled | Disable switch | boolean | false |
diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
index 81c392d8c..99fe6f63c 100644
--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@@ -3,7 +3,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | autoFocus | 组件自动获取焦点 | boolean | false |
-| checked | 指定当前是否选中 | boolean | false |
+| checked(v-model) | 指定当前是否选中 | boolean | false |
 | checkedChildren | 选中时的内容 | string\|slot |  |
 | defaultChecked | 初始是否选中 | boolean | false |
 | disabled | 是否禁用 | boolean | false |
diff --git a/components/pagination/KeyCode.js b/components/vc-pagination/KeyCode.js
similarity index 100%
rename from components/pagination/KeyCode.js
rename to components/vc-pagination/KeyCode.js
diff --git a/components/pagination/Options.vue b/components/vc-pagination/Options.vue
similarity index 67%
rename from components/pagination/Options.vue
rename to components/vc-pagination/Options.vue
index eb3443e61..1a8d38d91 100644
--- a/components/pagination/Options.vue
+++ b/components/vc-pagination/Options.vue
@@ -1,19 +1,21 @@
 <script>
-import PropTypes from 'vue-types'
+import PropTypes from '../_util/vue-types'
 import KEYCODE from './KeyCode'
+import BaseMixin from '../_util/BaseMixin'
 
-function noop () {
-}
 export default {
+  mixins: [BaseMixin],
   props: {
     rootPrefixCls: PropTypes.String,
-    changeSize: PropTypes.func.def(noop),
-    quickGo: PropTypes.func.def(noop),
-    selectComponentClass: PropTypes.func.def(noop),
+    changeSize: PropTypes.func,
+    quickGo: PropTypes.func,
+    selectComponentClass: PropTypes.any,
     current: PropTypes.number,
     pageSizeOptions: PropTypes.array.def(['10', '20', '30', '40']),
     pageSize: PropTypes.number,
+    buildOptionText: PropTypes.func,
     locale: PropTypes.object,
+    goButton: PropTypes.any,
   },
   data () {
     return {
@@ -22,11 +24,13 @@ export default {
     }
   },
   methods: {
-    buildOptionText (value) {
+    defaultBuildOptionText (value) {
       return `${value} ${this.locale.items_per_page}`
     },
-    changeValue (e) {
-      this.goInputText = e.target.value
+    handleChange (e) {
+      this.setState({
+        goInputText: e.target.value,
+      })
     },
     go (e) {
       let val = this.goInputText
@@ -38,19 +42,16 @@ export default {
         val = this.stateCurrent
       }
       if (e.keyCode === KEYCODE.ENTER || e.type === 'click') {
-        this.goInputText = ''
-        this.stateCurrent = this.quickGo(val)
+        this.setState({
+          goInputText: '',
+          stateCurrent: this.quickGo(val),
+        })
       }
     },
   },
   render () {
-    const locale = this.locale
-    const prefixCls = `${this.rootPrefixCls}-options`
-    const changeSize = this.changeSize
-    const quickGo = this.quickGo
-    const goButton = this.goButton
-    const buildOptionText = this.buildOptionText
-    const Select = this.selectComponentClass
+    const { rootPrefixCls, locale, changeSize, quickGo, goButton, buildOptionText, selectComponentClass: Select, defaultBuildOptionText } = this
+    const prefixCls = `${rootPrefixCls}-options`
     let changeSelect = null
     let goInput = null
     let gotoButton = null
@@ -63,7 +64,7 @@ export default {
       const Option = Select.Option
       const pageSize = this.pageSize || this.pageSizeOptions[0]
       const options = this.pageSizeOptions.map((opt, i) => (
-        <Option key={i} value={opt}>{buildOptionText(opt)}</Option>
+        <Option key={i} value={opt}>{buildOptionText ? buildOptionText(opt) : defaultBuildOptionText(opt)}</Option>
       ))
 
       changeSelect = (
@@ -74,7 +75,7 @@ export default {
           optionLabelProp='children'
           dropdownMatchSelectWidth={false}
           value={pageSize.toString()}
-          onChange={this.changeSize}
+          onChange={value => this.changeSize(Number(value))}
           getPopupContainer={triggerNode => triggerNode.parentNode}
         >
           {options}
@@ -95,7 +96,12 @@ export default {
             </button>
           )
         } else {
-          gotoButton = goButton
+          gotoButton = (
+            <span
+              onClick={this.go}
+              onKeyUp={this.go}
+            >{goButton}</span>
+          )
         }
       }
       goInput = (
@@ -104,7 +110,7 @@ export default {
           <input
             type='text'
             value={this.goInputText}
-            onInput={this.changeValue}
+            onChange={this.handleChange}
             onKeyup={this.go}
           />
           {locale.page}
diff --git a/components/pagination/Pager.vue b/components/vc-pagination/Pager.vue
similarity index 61%
rename from components/pagination/Pager.vue
rename to components/vc-pagination/Pager.vue
index a5137e890..24813e270 100644
--- a/components/pagination/Pager.vue
+++ b/components/vc-pagination/Pager.vue
@@ -1,11 +1,15 @@
 <script>
+import PropTypes from '../_util/vue-types'
+
 export default {
   name: 'Page',
   props: {
-    rootPrefixCls: String,
-    page: Number,
-    active: Boolean,
-    showTitle: Boolean,
+    rootPrefixCls: PropTypes.string,
+    page: PropTypes.number,
+    active: PropTypes.bool,
+    last: PropTypes.bool,
+    locale: PropTypes.object,
+    showTitle: PropTypes.bool,
     itemRender: {
       type: Function,
       default: () => {},
@@ -33,12 +37,22 @@ export default {
     },
   },
   render () {
+    const { rootPrefixCls, page, active } = this
+    const prefixCls = `${rootPrefixCls}-item`
+    let cls = `${prefixCls} ${prefixCls}-${page}`
+
+    if (active) {
+      cls = `${cls} ${prefixCls}-active`
+    }
+
     return (
       <li
-        class={this.classes}
+        class={cls}
         onClick={this.handleClick}
         onKeypress={this.handleKeyPress}
-        title={this.showTitle ? this.page : null}>
+        title={this.showTitle ? this.page : null}
+        tabIndex='0'
+      >
         {this.itemRender(this.page, 'page', <a>{this.page}</a>)}
       </li>
     )
diff --git a/components/vc-pagination/Pagination.vue b/components/vc-pagination/Pagination.vue
new file mode 100644
index 000000000..4f64f2f2b
--- /dev/null
+++ b/components/vc-pagination/Pagination.vue
@@ -0,0 +1,527 @@
+<script>
+import PropTypes from '../_util/vue-types'
+import BaseMixin from '../_util/BaseMixin'
+import { hasProp } from '../_util/props-util'
+import Pager from './Pager'
+import Options from './Options'
+import LOCALE from './locale/zh_CN'
+import KEYCODE from './KeyCode'
+
+function noop () {
+}
+
+// 是否是正整数
+function isInteger (value) {
+  return typeof value === 'number' &&
+    isFinite(value) &&
+    Math.floor(value) === value
+}
+
+function defaultItemRender (page, type, element) {
+  return element
+}
+
+export default {
+  name: 'Pagination',
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string.def('rc-pagination'),
+    selectPrefixCls: PropTypes.string.def('rc-select'),
+    current: PropTypes.number,
+    defaultCurrent: PropTypes.number.def(1),
+    total: PropTypes.number.def(0),
+    pageSize: PropTypes.number,
+    defaultPageSize: PropTypes.number.def(10),
+    change: PropTypes.func.def(noop),
+    hideOnSinglePage: PropTypes.bool.def(false),
+    showSizeChanger: PropTypes.bool.def(false),
+    showLessItems: PropTypes.bool.def(false),
+    // showSizeChange: PropTypes.func.def(noop),
+    selectComponentClass: PropTypes.any,
+    showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(false),
+    showTitle: PropTypes.bool.def(true),
+    pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
+    showTotal: PropTypes.func,
+    simple: PropTypes.bool,
+    locale: PropTypes.object.def(LOCALE),
+    itemRender: PropTypes.func.def(defaultItemRender),
+  },
+  model: {
+    prop: 'current',
+  },
+  data () {
+    const hasOnChange = this.onChange !== noop
+    const hasCurrent = hasProp(this, 'current')
+    if (hasCurrent && !hasOnChange) {
+      console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line
+    }
+    let current = this.defaultCurrent
+    if (hasCurrent) {
+      current = this.current
+    }
+
+    let pageSize = this.defaultPageSize
+    if (hasProp(this, 'pageSize')) {
+      pageSize = this.pageSize
+    }
+
+    return {
+      stateCurrent: current,
+      stateCurrentInputValue: current,
+      statePageSize: pageSize,
+    }
+  },
+  watch: {
+    current (val) {
+      this.setState({
+        stateCurrent: val,
+        stateCurrentInputValue: val,
+      })
+    },
+    pageSize (val) {
+      const newState = {}
+      let current = this.current
+      const newCurrent = this.calculatePage(val)
+      current = current > newCurrent ? newCurrent : current
+      if (hasProp(this, 'current')) {
+        newState.stateCurrent = current
+        newState.stateCurrentInputValue = current
+      }
+      newState.statePageSize = val
+      this.setState(newState)
+    },
+  },
+  methods: {
+    isValid (page) {
+      return isInteger(page) && page >= 1 && page !== this.stateCurrent
+    },
+    calculatePage (p) {
+      let pageSize = p
+      if (typeof pageSize === 'undefined') {
+        pageSize = this.statePageSize
+      }
+      return Math.floor((this.total - 1) / pageSize) + 1
+    },
+    handleGoTO (event) {
+      if (event.keyCode === KEYCODE.ENTER || event.type === 'click') {
+        this.handleChange(this.stateCurrentInputValue)
+      }
+    },
+    prev () {
+      if (this.hasPrev()) {
+        this.handleChange(this.stateCurrent - 1)
+      }
+    },
+    next () {
+      if (this.hasNext()) {
+        this.handleChange(this.stateCurrent + 1)
+      }
+    },
+    hasPrev () {
+      return this.stateCurrent > 1
+    },
+    hasNext () {
+      return this.stateCurrent < this.calculatePage()
+    },
+    handleKeyDown (event) {
+      if (event.keyCode === KEYCODE.ARROW_UP || event.keyCode === KEYCODE.ARROW_DOWN) {
+        event.preventDefault()
+      }
+    },
+    handleKeyUp (event) {
+      const inputValue = event.target.value
+      const stateCurrentInputValue = this.stateCurrentInputValue
+      let value
+
+      if (inputValue === '') {
+        value = inputValue
+      } else if (isNaN(Number(inputValue))) {
+        value = stateCurrentInputValue
+      } else {
+        value = Number(inputValue)
+      }
+
+      if (value !== stateCurrentInputValue) {
+        this.setState({
+          stateCurrentInputValue: value,
+        })
+      }
+
+      if (event.keyCode === KEYCODE.ENTER) {
+        this.handleChange(value)
+      } else if (event.keyCode === KEYCODE.ARROW_UP) {
+        this.handleChange(value - 1)
+      } else if (event.keyCode === KEYCODE.ARROW_DOWN) {
+        this.handleChange(value + 1)
+      }
+    },
+    changePageSize (size) {
+      let current = this.stateCurrent
+      const newCurrent = this.calculatePage(size)
+      current = current > newCurrent ? newCurrent : current
+      if (typeof size === 'number') {
+        if (!hasProp(this, 'pageSize')) {
+          this.setState({
+            statePageSize: size,
+          })
+        }
+        if (!hasProp(this, 'current')) {
+          this.setState({
+            stateCurrent: current,
+            stateCurrentInputValue: current,
+          })
+        }
+      }
+      this.$emit('showSizeChange', current, size)
+    },
+    handleChange (p) {
+      let page = p
+      if (this.isValid(page)) {
+        const allTotal = this.calculatePage()
+        if (page > allTotal) {
+          page = allTotal
+        }
+        if (!hasProp(this, 'current')) {
+          this.setState({
+            stateCurrent: page,
+            stateCurrentInputValue: page,
+          })
+        }
+        this.$emit('input', page)
+        this.$emit('change', page, this.statePageSize)
+        return page
+      }
+      return this.stateCurrent
+    },
+    runIfEnter (event, callback, ...restParams) {
+      if (event.key === 'Enter' || event.charCode === 13) {
+        callback(...restParams)
+      }
+    },
+    runIfEnterPrev (event) {
+      this.runIfEnter(event, this.prev)
+    },
+    runIfEnterNext (event) {
+      this.runIfEnter(event, this.next)
+    },
+    runIfEnterJumpPrev (event) {
+      this.runIfEnter(event, this.jumpPrev)
+    },
+    runIfEnterJumpNext (event) {
+      this.runIfEnter(event, this.jumpNext)
+    },
+    getJumpPrevPage () {
+      return Math.max(1, this.stateCurrent - (this.showLessItems ? 3 : 5))
+    },
+    getJumpNextPage () {
+      return Math.min(this.calculatePage(), this.stateCurrent + (this.showLessItems ? 3 : 5))
+    },
+    jumpPrev () {
+      this.handleChange(this.getJumpPrevPage())
+    },
+    jumpNext () {
+      this.handleChange(this.getJumpNextPage())
+    },
+  },
+  render () {
+    // When hideOnSinglePage is true and there is only 1 page, hide the pager
+    if (this.hideOnSinglePage === true && this.total <= this.statePageSize) {
+      return null
+    }
+
+    const locale = this.locale
+
+    const prefixCls = this.prefixCls
+    const allPages = this.calculatePage()
+    const pagerList = []
+    let jumpPrev = null
+    let jumpNext = null
+    let firstPager = null
+    let lastPager = null
+    let gotoButton = null
+
+    const goButton = (this.showQuickJumper && this.showQuickJumper.goButton)
+    const pageBufferSize = this.showLessItems ? 1 : 2
+    const { stateCurrent, statePageSize } = this
+    const prevPage = stateCurrent - 1 > 0 ? stateCurrent - 1 : 0
+    const nextPage = stateCurrent + 1 < allPages ? stateCurrent + 1 : allPages
+
+    if (this.simple) {
+      if (goButton) {
+        if (typeof goButton === 'boolean') {
+          gotoButton = (
+            <button
+              type='button'
+              onClick={this.handleGoTO}
+              onKeyUp={this.handleGoTO}
+            >
+              {locale.jump_to_confirm}
+            </button>
+          )
+        } else {
+          gotoButton = (
+            <span
+              onClick={this.handleGoTO}
+              onKeyUp={this.handleGoTO}
+            >{goButton}</span>
+          )
+        }
+        gotoButton = (
+          <li
+            title={this.showTitle ? `${locale.jump_to}${this.stateCurrent}/${allPages}` : null}
+            class={`${prefixCls}-simple-pager`}
+          >
+            {gotoButton}
+          </li>
+        )
+      }
+      return (
+        <ul class={`${prefixCls} ${prefixCls}-simple`}>
+          <li
+            title={this.showTitle ? locale.prev_page : null}
+            onClick={this.prev}
+            tabIndex='0'
+            onKeypress={this.runIfEnterPrev}
+            class={`${this.hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+            aria-disabled={!this.hasPrev()}
+          >
+            {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
+          </li>
+          <li
+            title={this.showTitle ? `${stateCurrent}/${allPages}` : null}
+            class={`${prefixCls}-simple-pager`}
+          >
+            <input
+              type='text'
+              value={this.stateCurrentInputValue}
+              onKeydown={this.handleKeyDown}
+              onKeyup={this.handleKeyUp}
+              onChange={this.handleKeyUp}
+              size='3'
+            />
+            <span class={`${prefixCls}-slash`}>／</span>
+            {allPages}
+          </li>
+          <li
+            title={this.showTitle ? locale.next_page : null}
+            onClick={this.next}
+            tabIndex='0'
+            onKeypress={this.runIfEnterNext}
+            class={`${this.hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+            aria-disabled={!this.hasNext()}
+          >
+            {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
+          </li>
+          {gotoButton}
+        </ul>
+      )
+    }
+
+    if (allPages <= 5 + pageBufferSize * 2) {
+      for (let i = 1; i <= allPages; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            locale={locale}
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+            itemRender={this.itemRender}
+          />
+        )
+      }
+    } else {
+      const prevItemTitle = this.showLessItems ? locale.prev_3 : locale.prev_5
+      const nextItemTitle = this.showLessItems ? locale.next_3 : locale.next_5
+      jumpPrev = (
+        <li
+          title={this.showTitle ? prevItemTitle : null}
+          key='prev'
+          onClick={this.jumpPrev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterJumpPrev}
+          class={`${prefixCls}-jump-prev`}
+        >
+          {this.itemRender(
+            this.getJumpPrevPage(), 'jump-prev', <a class={`${prefixCls}-item-link`} />
+          )}
+        </li>
+      )
+      jumpNext = (
+        <li
+          title={this.showTitle ? nextItemTitle : null}
+          key='next'
+          tabIndex='0'
+          onClick={this.jumpNext}
+          onKeypress={this.runIfEnterJumpNext}
+          class={`${prefixCls}-jump-next`}
+        >
+          {this.itemRender(
+            this.getJumpNextPage(), 'jump-next', <a class={`${prefixCls}-item-link`} />
+          )}
+        </li>
+      )
+      lastPager = (
+        <Pager
+          locale={locale}
+          last
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={allPages}
+          page={allPages}
+          active={false}
+          showTitle={this.showTitle}
+          itemRender={this.itemRender}
+        />
+      )
+      firstPager = (
+        <Pager
+          locale={locale}
+          rootPrefixCls={prefixCls}
+          onClick={this.handleChange}
+          onKeypress={this.runIfEnter}
+          key={1}
+          page={1}
+          active={false}
+          showTitle={this.showTitle}
+          itemRender={this.itemRender}
+        />
+      )
+
+      let left = Math.max(1, stateCurrent - pageBufferSize)
+      let right = Math.min(stateCurrent + pageBufferSize, allPages)
+
+      if (stateCurrent - 1 <= pageBufferSize) {
+        right = 1 + pageBufferSize * 2
+      }
+
+      if (allPages - stateCurrent <= pageBufferSize) {
+        left = allPages - pageBufferSize * 2
+      }
+
+      for (let i = left; i <= right; i++) {
+        const active = stateCurrent === i
+        pagerList.push(
+          <Pager
+            locale={locale}
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={i}
+            page={i}
+            active={active}
+            showTitle={this.showTitle}
+            itemRender={this.itemRender}
+          />
+        )
+      }
+
+      if (stateCurrent - 1 >= pageBufferSize * 2 && stateCurrent !== 1 + 2) {
+        pagerList[0] = (
+          <Pager
+            locale={locale}
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={left}
+            page={left}
+            class={`${prefixCls}-item-after-jump-prev`}
+            active={false}
+            showTitle={this.showTitle}
+            itemRender={this.itemRender}
+          />
+        )
+        pagerList.unshift(jumpPrev)
+      }
+      if (allPages - stateCurrent >= pageBufferSize * 2 && stateCurrent !== allPages - 2) {
+        pagerList[pagerList.length - 1] = (
+          <Pager
+            locale={locale}
+            rootPrefixCls={prefixCls}
+            onClick={this.handleChange}
+            onKeypress={this.runIfEnter}
+            key={right}
+            page={right}
+            class={`${prefixCls}-item-before-jump-next`}
+            active={false}
+            showTitle={this.showTitle}
+            itemRender={this.itemRender}
+          />
+        )
+        pagerList.push(jumpNext)
+      }
+
+      if (left !== 1) {
+        pagerList.unshift(firstPager)
+      }
+      if (right !== allPages) {
+        pagerList.push(lastPager)
+      }
+    }
+
+    let totalText = null
+
+    if (this.showTotal) {
+      totalText = (
+        <li class={`${prefixCls}-total-text`}>
+          {this.showTotal(
+            this.total,
+            [
+              (stateCurrent - 1) * statePageSize + 1,
+              stateCurrent * statePageSize > this.total ? this.total : stateCurrent * statePageSize,
+            ]
+          )}
+        </li>
+      )
+    }
+    const prevDisabled = !this.hasPrev()
+    const nextDisabled = !this.hasNext()
+    return (
+      <ul
+        class={`${prefixCls}`}
+        unselectable='unselectable'
+      >
+        {totalText}
+        <li
+          title={this.showTitle ? locale.prev_page : null}
+          onClick={this.prev}
+          tabIndex='0'
+          onKeypress={this.runIfEnterPrev}
+          class={`${!prevDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
+          aria-disabled={prevDisabled}
+        >
+          {this.itemRender(prevPage, 'prev', <a class={`${prefixCls}-item-link`} />)}
+        </li>
+        {pagerList}
+        <li
+          title={this.showTitle ? locale.next_page : null}
+          onClick={this.next}
+          tabIndex='0'
+          onKeypress={this.runIfEnterNext}
+          class={`${!nextDisabled ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
+          aria-disabled={nextDisabled}
+        >
+          {this.itemRender(nextPage, 'next', <a class={`${prefixCls}-item-link`} />)}
+        </li>
+        <Options
+          locale={locale}
+          rootPrefixCls={prefixCls}
+          selectComponentClass={this.selectComponentClass}
+          selectPrefixCls={this.selectPrefixCls}
+          changeSize={this.showSizeChanger ? this.changePageSize : null}
+          current={stateCurrent}
+          pageSize={statePageSize}
+          pageSizeOptions={this.pageSizeOptions}
+          quickGo={this.showQuickJumper ? this.handleChange : null}
+          goButton={goButton}
+        />
+      </ul>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/assets/index.less b/components/vc-pagination/assets/index.less
new file mode 100644
index 000000000..bb43a7324
--- /dev/null
+++ b/components/vc-pagination/assets/index.less
@@ -0,0 +1,288 @@
+@prefixClass: rc-pagination;
+
+.@{prefixClass} {
+  font-size: 12px;
+  font-family: 'Arial';
+  user-select: none;
+  padding: 0;
+
+  > li {
+    list-style: none;
+  }
+
+  &-total-text {
+    float: left;
+    height: 30px;
+    line-height: 30px;
+    list-style: none;
+    padding: 0;
+    margin: 0 8px 0 0;
+  }
+
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &-item {
+    cursor: pointer;
+    border-radius: 6px;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    list-style: none;
+    float: left;
+    border: 1px solid #d9d9d9;
+    background-color: #fff;
+    margin-right: 8px;
+
+    a {
+      text-decoration: none;
+      color: #666;
+    }
+
+    &:hover {
+      border-color: #2db7f5;
+      a {
+        color: #2db7f5;
+      }
+    }
+
+    &-active {
+      background-color: #2db7f5;
+      border-color: #2db7f5;
+
+      a {
+        color: #fff;
+      }
+
+      &:hover {
+        a {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  &-jump-prev, &-jump-next {
+    &:after {
+      content: "•••";
+      display: block;
+      letter-spacing: 2px;
+      color: #ccc;
+      font-size: 12px;
+      margin-top: 1px;
+    }
+
+    &:hover {
+      &:after {
+        color: #2db7f5;
+      }
+    }
+  }
+
+  &-jump-prev {
+    &:hover {
+      &:after {
+        content: "«";
+      }
+    }
+  }
+
+  &-jump-next {
+    &:hover {
+      &:after {
+        content: "»";
+      }
+    }
+  }
+
+  &-prev, &-jump-prev, &-jump-next {
+    margin-right: 8px;
+  }
+  &-prev, &-next, &-jump-prev, &-jump-next {
+    cursor: pointer;
+    color: #666;
+    font-size: 10px;
+    border-radius: 6px;
+    list-style: none;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    float: left;
+    text-align: center;
+  }
+
+  &-prev {
+    a {
+      &:after {
+        content: "‹";
+        display: block;
+      }
+    }
+  }
+
+  &-next {
+    a {
+      &:after {
+        content: "›";
+        display: block;
+      }
+    }
+  }
+
+  &-prev, &-next {
+    border: 1px solid #d9d9d9;
+    font-size: 18px;
+    a {
+      color: #666;
+      &:after {
+        margin-top: -1px;
+      }
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    a {
+      color: #ccc;
+    }
+  }
+
+  &-options {
+    float: left;
+    margin-left: 15px;
+    &-size-changer {
+      float: left;
+      width: 80px;
+    }
+
+    &-quick-jumper {
+      float: left;
+      margin-left: 16px;
+      height: 28px;
+      line-height: 28px;
+
+      input {
+        margin: 0 8px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 6px;
+        border: 1px solid #d9d9d9;
+        outline: none;
+        padding: 3px 12px;
+        width: 50px;
+        height: 28px;
+
+        &:hover {
+          border-color: #2db7f5;
+        }
+      }
+
+      button {
+        display: inline-block;
+        margin: 0 8px;
+        font-weight: 500;
+        text-align: center;
+        touch-action: manipulation;
+        cursor: pointer;
+        background-image: none;
+        border: 1px solid transparent;
+        white-space: nowrap;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 6px;
+        height: 28px;
+        user-select: none;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        position: relative;
+        color: rgba(0, 0, 0, .65);
+        background-color: #fff;
+        border-color: #d9d9d9;
+
+        &:hover, &:active, &:focus {
+          color: #2db7f5;
+          background-color: #fff;
+          border-color: #2db7f5;
+        }
+      }
+    }
+  }
+
+  &-simple {
+    .@{prefixClass}-prev, .@{prefixClass}-next {
+      border: none;
+      height: 24px;
+      line-height: 24px;
+      margin: 0;
+      font-size: 18px;
+    }
+
+    .@{prefixClass}-simple-pager {
+      float: left;
+      margin-right: 8px;
+      list-style: none;
+
+      .@{prefixClass}-slash {
+        margin: 0 10px;
+      }
+
+      input {
+        margin: 0 8px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 6px;
+        border: 1px solid #d9d9d9;
+        outline: none;
+        padding: 5px 8px;
+        min-height: 20px;
+
+        &:hover {
+          border-color: #2db7f5;
+        }
+      }
+
+      button {
+        display: inline-block;
+        margin: 0 8px;
+        font-weight: 500;
+        text-align: center;
+        touch-action: manipulation;
+        cursor: pointer;
+        background-image: none;
+        border: 1px solid transparent;
+        white-space: nowrap;
+        padding: 0 8px;
+        font-size: 12px;
+        border-radius: 6px;
+        height: 26px;
+        user-select: none;
+        transition: all .3s cubic-bezier(.645, .045, .355, 1);
+        position: relative;
+        color: rgba(0, 0, 0, .65);
+        background-color: #fff;
+        border-color: #d9d9d9;
+
+        &:hover, &:active, &:focus {
+          color: #2db7f5;
+          background-color: #fff;
+          border-color: #2db7f5;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .@{prefixClass}-item {
+    &-after-jump-prev,
+    &-before-jump-next {
+      display: none;
+    }
+  }
+}
diff --git a/components/vc-pagination/demo/default.vue b/components/vc-pagination/demo/default.vue
new file mode 100644
index 000000000..ec9be7a63
--- /dev/null
+++ b/components/vc-pagination/demo/default.vue
@@ -0,0 +1,27 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {
+      current: 3,
+    }
+  },
+  methods: {
+    onChange (page) {
+      console.log(page)
+      this.current = page
+    },
+  },
+  render () {
+    return (
+      <VcPagination
+        onChange={this.onChange}
+        current={this.current}
+        total={25}
+      />
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/itemRender.vue b/components/vc-pagination/demo/itemRender.vue
new file mode 100644
index 000000000..1b0c42bf2
--- /dev/null
+++ b/components/vc-pagination/demo/itemRender.vue
@@ -0,0 +1,41 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  methods: {
+    itemRender (current, type, element) {
+      if (type === 'page') {
+        return <a href={`#${current}`}>{current}</a>
+      }
+      return element
+    },
+    textItemRender (current, type, element) {
+      if (type === 'prev') {
+        return 'Prev'
+      }
+      if (type === 'next') {
+        return 'Next'
+      }
+      return element
+    },
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          total={100}
+          itemRender={this.itemRender}
+        />
+        <VcPagination
+          total={100}
+          itemRender={this.textItemRender}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/jumper.vue b/components/vc-pagination/demo/jumper.vue
new file mode 100644
index 000000000..d2c048dec
--- /dev/null
+++ b/components/vc-pagination/demo/jumper.vue
@@ -0,0 +1,36 @@
+<script>
+import VcPagination from '../index'
+import VcSelect from '../../vc-select'
+import '../assets/index.less'
+import '../../vc-select/assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      console.log(current)
+      console.log(pageSize)
+    },
+    onChange (current, pageSize) {
+      console.log('onChange:current=', current)
+      console.log('onChange:pageSize=', pageSize)
+    },
+  },
+  render () {
+    return (
+      <VcPagination
+        selectComponentClass={VcSelect}
+        showQuickJumper
+        showSizeChanger
+        defaultPageSize={20}
+        defaultCurrent={5}
+        onShowSizeChange={this.onShowSizeChange}
+        onChange={this.onChange}
+        total={450}
+      />
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/jumperWithGoButton.vue b/components/vc-pagination/demo/jumperWithGoButton.vue
new file mode 100644
index 000000000..a47bfa632
--- /dev/null
+++ b/components/vc-pagination/demo/jumperWithGoButton.vue
@@ -0,0 +1,41 @@
+<script>
+import VcPagination from '../index'
+import VcSelect from '../../vc-select'
+import '../assets/index.less'
+import '../../vc-select/assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      console.log(current)
+      console.log(pageSize)
+    },
+    onChange (current, pageSize) {
+      console.log('onChange:current=', current)
+      console.log('onChange:pageSize=', pageSize)
+    },
+  },
+  render () {
+    return (
+      <div>
+        <p> customize node </p>
+        <VcPagination
+          selectComponentClass={VcSelect}
+          showSizeChanger
+          showQuickJumper={{ goButton: <button>确定</button> }}
+          defaultPageSize={20}
+          defaultCurrent={5}
+          onShowSizeChange={this.onShowSizeChange}
+          onChange={this.onChange}
+          total={450}
+        />
+        <p> default node </p>
+        <VcPagination simple showQuickJumper={{ goButton: true }} defaultCurrent={1} total={50} />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/lessPages.vue b/components/vc-pagination/demo/lessPages.vue
new file mode 100644
index 000000000..85c40f40c
--- /dev/null
+++ b/components/vc-pagination/demo/lessPages.vue
@@ -0,0 +1,31 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {
+      current: 3,
+    }
+  },
+  methods: {
+    onChange (page) {
+      console.log(page)
+      this.current = page
+    },
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          onChange={this.onChange}
+          current={this.current}
+          total={80}
+          showLessItems
+        />
+        <VcPagination showLessItems defaultCurrent={1} total={60} />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/more.vue b/components/vc-pagination/demo/more.vue
new file mode 100644
index 000000000..1b3ef0ff2
--- /dev/null
+++ b/components/vc-pagination/demo/more.vue
@@ -0,0 +1,17 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination defaultCurrent={3} total={450} />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/showTitle.vue b/components/vc-pagination/demo/showTitle.vue
new file mode 100644
index 000000000..226548123
--- /dev/null
+++ b/components/vc-pagination/demo/showTitle.vue
@@ -0,0 +1,32 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {
+      current: 3,
+    }
+  },
+  methods: {
+    onChange (page) {
+      console.log(page)
+      this.current = page
+    },
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          onChange={this.onChange}
+          current={this.current}
+          total={80}
+          showLessItems
+          showTitle={false}
+        />
+        <VcPagination showLessItems defaultCurrent={1} total={60} showTitle={false} />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/showTotal.vue b/components/vc-pagination/demo/showTotal.vue
new file mode 100644
index 000000000..091f3f066
--- /dev/null
+++ b/components/vc-pagination/demo/showTotal.vue
@@ -0,0 +1,24 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          showTotal={(total) => `Total ${total} items`}
+          total={455}
+        />
+        <VcPagination
+          showTotal={(total, range) => `${range[0]} - ${range[1]} of ${total} items`}
+          total={455}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/simple.vue b/components/vc-pagination/demo/simple.vue
new file mode 100644
index 000000000..7585e74ed
--- /dev/null
+++ b/components/vc-pagination/demo/simple.vue
@@ -0,0 +1,20 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          defaultCurrent={2}
+          total={25}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/sizer.vue b/components/vc-pagination/demo/sizer.vue
new file mode 100644
index 000000000..0b9276fe2
--- /dev/null
+++ b/components/vc-pagination/demo/sizer.vue
@@ -0,0 +1,42 @@
+<script>
+import VcPagination from '../index'
+import VcSelect from '../../vc-select'
+import '../assets/index.less'
+import '../../vc-select/assets/index.less'
+
+export default {
+  data () {
+    return {
+      pageSize: 20,
+    }
+  },
+  methods: {
+    onShowSizeChange (current, pageSize) {
+      console.log(current)
+      this.pageSize = pageSize
+    },
+  },
+  render () {
+    return (
+      <div style={{ margin: 10 }}>
+        <VcPagination
+          selectComponentClass={VcSelect}
+          showSizeChanger
+          pageSize={this.pageSize}
+          onShowSizeChange={this.onShowSizeChange}
+          defaultCurrent={3}
+          total={500}
+        />
+        <VcPagination
+          selectComponentClass={VcSelect}
+          showSizeChanger
+          pageSize={this.pageSize}
+          onShowSizeChange={this.onShowSizeChange}
+          defaultCurrent={3}
+          total={500}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/stupid.vue b/components/vc-pagination/demo/stupid.vue
new file mode 100644
index 000000000..309d687f8
--- /dev/null
+++ b/components/vc-pagination/demo/stupid.vue
@@ -0,0 +1,21 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          simple
+          defaultCurrent={1}
+          total={50}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/demo/styles.vue b/components/vc-pagination/demo/styles.vue
new file mode 100644
index 000000000..ea276d3de
--- /dev/null
+++ b/components/vc-pagination/demo/styles.vue
@@ -0,0 +1,21 @@
+<script>
+import VcPagination from '../index'
+import '../assets/index.less'
+
+export default {
+  data () {
+    return {}
+  },
+  render () {
+    return (
+      <div>
+        <VcPagination
+          defaultCurrent={1}
+          total={25}
+          style={{ margin: '100px' }}
+        />
+      </div>
+    )
+  },
+}
+</script>
diff --git a/components/vc-pagination/index.js b/components/vc-pagination/index.js
new file mode 100644
index 000000000..40ac52f2e
--- /dev/null
+++ b/components/vc-pagination/index.js
@@ -0,0 +1 @@
+export { default } from './Pagination'
diff --git a/components/pagination/locale/ar_EG.js b/components/vc-pagination/locale/ar_EG.js
similarity index 100%
rename from components/pagination/locale/ar_EG.js
rename to components/vc-pagination/locale/ar_EG.js
diff --git a/components/pagination/locale/bg_BG.js b/components/vc-pagination/locale/bg_BG.js
similarity index 100%
rename from components/pagination/locale/bg_BG.js
rename to components/vc-pagination/locale/bg_BG.js
diff --git a/components/pagination/locale/ca_ES.js b/components/vc-pagination/locale/ca_ES.js
similarity index 100%
rename from components/pagination/locale/ca_ES.js
rename to components/vc-pagination/locale/ca_ES.js
diff --git a/components/pagination/locale/cs_CZ.js b/components/vc-pagination/locale/cs_CZ.js
similarity index 100%
rename from components/pagination/locale/cs_CZ.js
rename to components/vc-pagination/locale/cs_CZ.js
diff --git a/components/pagination/locale/da_DK.js b/components/vc-pagination/locale/da_DK.js
similarity index 100%
rename from components/pagination/locale/da_DK.js
rename to components/vc-pagination/locale/da_DK.js
diff --git a/components/pagination/locale/de_DE.js b/components/vc-pagination/locale/de_DE.js
similarity index 100%
rename from components/pagination/locale/de_DE.js
rename to components/vc-pagination/locale/de_DE.js
diff --git a/components/pagination/locale/el_GR.js b/components/vc-pagination/locale/el_GR.js
similarity index 100%
rename from components/pagination/locale/el_GR.js
rename to components/vc-pagination/locale/el_GR.js
diff --git a/components/pagination/locale/en_GB.js b/components/vc-pagination/locale/en_GB.js
similarity index 100%
rename from components/pagination/locale/en_GB.js
rename to components/vc-pagination/locale/en_GB.js
diff --git a/components/pagination/locale/en_US.js b/components/vc-pagination/locale/en_US.js
similarity index 100%
rename from components/pagination/locale/en_US.js
rename to components/vc-pagination/locale/en_US.js
diff --git a/components/pagination/locale/es_ES.js b/components/vc-pagination/locale/es_ES.js
similarity index 100%
rename from components/pagination/locale/es_ES.js
rename to components/vc-pagination/locale/es_ES.js
diff --git a/components/pagination/locale/et_EE.js b/components/vc-pagination/locale/et_EE.js
similarity index 100%
rename from components/pagination/locale/et_EE.js
rename to components/vc-pagination/locale/et_EE.js
diff --git a/components/pagination/locale/fa_IR.js b/components/vc-pagination/locale/fa_IR.js
similarity index 100%
rename from components/pagination/locale/fa_IR.js
rename to components/vc-pagination/locale/fa_IR.js
diff --git a/components/pagination/locale/fi_FI.js b/components/vc-pagination/locale/fi_FI.js
similarity index 100%
rename from components/pagination/locale/fi_FI.js
rename to components/vc-pagination/locale/fi_FI.js
diff --git a/components/pagination/locale/fr_BE.js b/components/vc-pagination/locale/fr_BE.js
similarity index 100%
rename from components/pagination/locale/fr_BE.js
rename to components/vc-pagination/locale/fr_BE.js
diff --git a/components/pagination/locale/fr_FR.js b/components/vc-pagination/locale/fr_FR.js
similarity index 100%
rename from components/pagination/locale/fr_FR.js
rename to components/vc-pagination/locale/fr_FR.js
diff --git a/components/vc-pagination/locale/hu_HU.js b/components/vc-pagination/locale/hu_HU.js
new file mode 100644
index 000000000..f8a3477e4
--- /dev/null
+++ b/components/vc-pagination/locale/hu_HU.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ oldal', // '/ page',
+  jump_to: 'Ugrás', // 'Goto',
+  jump_to_confirm: 'megerősít', // 'confirm',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Előző oldal', // 'Previous Page',
+  next_page: 'Következő oldal', // 'Next Page',
+  prev_5: 'Előző 5 oldal', // 'Previous 5 Pages',
+  next_5: 'Következő 5 oldal', // 'Next 5 Pages',
+  prev_3: 'Előző 3 oldal', // 'Previous 3 Pages',
+  next_3: 'Következő 3 oldal', // 'Next 3 Pages',
+};
diff --git a/components/pagination/locale/is_IS.js b/components/vc-pagination/locale/is_IS.js
similarity index 100%
rename from components/pagination/locale/is_IS.js
rename to components/vc-pagination/locale/is_IS.js
diff --git a/components/pagination/locale/it_IT.js b/components/vc-pagination/locale/it_IT.js
similarity index 100%
rename from components/pagination/locale/it_IT.js
rename to components/vc-pagination/locale/it_IT.js
diff --git a/components/pagination/locale/ja_JP.js b/components/vc-pagination/locale/ja_JP.js
similarity index 100%
rename from components/pagination/locale/ja_JP.js
rename to components/vc-pagination/locale/ja_JP.js
diff --git a/components/pagination/locale/ko_KR.js b/components/vc-pagination/locale/ko_KR.js
similarity index 100%
rename from components/pagination/locale/ko_KR.js
rename to components/vc-pagination/locale/ko_KR.js
diff --git a/components/vc-pagination/locale/ku_IQ.js b/components/vc-pagination/locale/ku_IQ.js
new file mode 100644
index 000000000..7ce767c15
--- /dev/null
+++ b/components/vc-pagination/locale/ku_IQ.js
@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '/ rûpel',
+  jump_to: 'Biçe',
+  jump_to_confirm: 'piştrast bike',
+  page: '',
+
+  // Pagination.jsx
+  prev_page: 'Rûpelê Pêş',
+  next_page: 'Rûpelê Paş',
+  prev_5: '5 Rûpelên Pêş',
+  next_5: '5 Rûpelên Paş',
+  prev_3: '3 Rûpelên Pêş',
+  next_3: '3 Rûpelên Paş',
+};
diff --git a/components/pagination/locale/nb_NO.js b/components/vc-pagination/locale/nb_NO.js
similarity index 100%
rename from components/pagination/locale/nb_NO.js
rename to components/vc-pagination/locale/nb_NO.js
diff --git a/components/pagination/locale/nl_BE.js b/components/vc-pagination/locale/nl_BE.js
similarity index 100%
rename from components/pagination/locale/nl_BE.js
rename to components/vc-pagination/locale/nl_BE.js
diff --git a/components/pagination/locale/nl_NL.js b/components/vc-pagination/locale/nl_NL.js
similarity index 100%
rename from components/pagination/locale/nl_NL.js
rename to components/vc-pagination/locale/nl_NL.js
diff --git a/components/pagination/locale/pl_PL.js b/components/vc-pagination/locale/pl_PL.js
similarity index 100%
rename from components/pagination/locale/pl_PL.js
rename to components/vc-pagination/locale/pl_PL.js
diff --git a/components/pagination/locale/pt_BR.js b/components/vc-pagination/locale/pt_BR.js
similarity index 100%
rename from components/pagination/locale/pt_BR.js
rename to components/vc-pagination/locale/pt_BR.js
diff --git a/components/pagination/locale/pt_PT.js b/components/vc-pagination/locale/pt_PT.js
similarity index 100%
rename from components/pagination/locale/pt_PT.js
rename to components/vc-pagination/locale/pt_PT.js
diff --git a/components/pagination/locale/ru_RU.js b/components/vc-pagination/locale/ru_RU.js
similarity index 100%
rename from components/pagination/locale/ru_RU.js
rename to components/vc-pagination/locale/ru_RU.js
diff --git a/components/pagination/locale/sk_SK.js b/components/vc-pagination/locale/sk_SK.js
similarity index 100%
rename from components/pagination/locale/sk_SK.js
rename to components/vc-pagination/locale/sk_SK.js
diff --git a/components/pagination/locale/sr_RS.js b/components/vc-pagination/locale/sr_RS.js
similarity index 100%
rename from components/pagination/locale/sr_RS.js
rename to components/vc-pagination/locale/sr_RS.js
diff --git a/components/pagination/locale/sv_SE.js b/components/vc-pagination/locale/sv_SE.js
similarity index 100%
rename from components/pagination/locale/sv_SE.js
rename to components/vc-pagination/locale/sv_SE.js
diff --git a/components/pagination/locale/th_TH.js b/components/vc-pagination/locale/th_TH.js
similarity index 100%
rename from components/pagination/locale/th_TH.js
rename to components/vc-pagination/locale/th_TH.js
diff --git a/components/vc-pagination/locale/ug_CN.js b/components/vc-pagination/locale/ug_CN.js
new file mode 100644
index 000000000..298a089fd
--- /dev/null
+++ b/components/vc-pagination/locale/ug_CN.js
@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: 'تال/ھەر بەت',
+  jump_to: 'بەتكە سەكرەش',
+  jump_to_confirm: 'مۇقىملاشتۇرۇش',
+  page: 'بەت',
+  // Pagination.jsx
+  prev_page: 'ئالدىنقى',
+  next_page: 'كېيىنكى',
+  prev_5: 'ئالدىغا 5 بەت',
+  next_5: 'كەينىگە 5 بەت',
+  prev_3: 'ئالدىغا 3 بەت',
+  next_3: 'كەينىگە 3 بەت',
+};
diff --git a/components/pagination/locale/uk_UA.js b/components/vc-pagination/locale/uk_UA.js
similarity index 100%
rename from components/pagination/locale/uk_UA.js
rename to components/vc-pagination/locale/uk_UA.js
diff --git a/components/pagination/locale/vi_VN.js b/components/vc-pagination/locale/vi_VN.js
similarity index 100%
rename from components/pagination/locale/vi_VN.js
rename to components/vc-pagination/locale/vi_VN.js
diff --git a/components/pagination/locale/zh_CN.js b/components/vc-pagination/locale/zh_CN.js
similarity index 100%
rename from components/pagination/locale/zh_CN.js
rename to components/vc-pagination/locale/zh_CN.js
diff --git a/components/pagination/locale/zh_TW.js b/components/vc-pagination/locale/zh_TW.js
similarity index 100%
rename from components/pagination/locale/zh_TW.js
rename to components/vc-pagination/locale/zh_TW.js
diff --git a/examples/routes.js b/examples/routes.js
index 401b22cbd..a559992ab 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/cascader/demo/${d}`),
+    component: import(`../components/pagination/demo/${d}.vue`),
   }
 }
 export default [