fix pagination

components/pagination/MiniSelect.vue

@@ -0,0 +1,22 @@
+<script>
+import VcSelect, { SelectProps } from '../select'
+import { getOptionProps, filterEmpty } from '../_util/props-util'
+
+export default {
+  props: {
+    ...SelectProps,
+  },
+  Option: VcSelect.Option,
+  render () {
+    const selectOptionsProps = getOptionProps(this)
+    const selelctProps = {
+      props: {
+        ...selectOptionsProps,
+        size: 'small',
+      },
+      on: this.$listeners,
+    }
+    return <VcSelect {...selelctProps}>{filterEmpty(this.$slots.default)}</VcSelect>
+  },
+}
+</script>

components/pagination/Pagination.vue

@@ -1,6 +1,7 @@
 <script>
 import PropTypes from '../_util/vue-types'
 import VcSelect from '../select'
+import MiniSelect from './MiniSelect'
 import enUS from '../vc-pagination/locale/en_US'
 import LocaleReceiver from '../locale-provider/LocaleReceiver'
 import { getOptionProps } from '../_util/props-util'
@@ -18,6 +19,7 @@ export const PaginationProps = {
     PropTypes.number,
     PropTypes.string,
   ])),
+  buildOptionText: PropTypes.func,
   showSizeChange: PropTypes.func,
   showQuickJumper: PropTypes.bool,
   showTotal: PropTypes.any,
@@ -46,13 +48,14 @@ export default {
   },
   methods: {
     renderPagination (locale) {
-      const { size, ...restProps } = getOptionProps(this)
+      const { buildOptionText, size, ...restProps } = getOptionProps(this)
       const isSmall = size === 'small'
       const paginationProps = {
         props: {
           ...restProps,
-          selectComponentClass: VcSelect,
+          selectComponentClass: (isSmall ? MiniSelect : VcSelect),
           locale,
+          buildOptionText: buildOptionText || this.$scopedSlots.buildOptionText,
         },
         class: {
           'mini': isSmall,

components/pagination/demo/index.vue

@@ -25,14 +25,18 @@
     <br>
     迷你
     <Pagination :current="1" :total="50" size="small"/>
-    <Pagination :current="1" :total="50" :showTotal="showTotal" size="small"/>
+    <Pagination :current="1" :total="50" :showTotal="showTotal" size="small" showSizeChanger showQuickJumper/>
     <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" showSizeChanger>
+      <template slot='buildOptionText' slot-scope='props'>
+        <span>{{props.value}}条/页</span>
+      </template>
+    </Pagination>
     <vc-button @click="getValue">当前值</vc-button>
     <br>
     上一步下一步

components/select/index.vue

@@ -41,10 +41,6 @@ const SelectValue = PropTypes.oneOfType([
   ])),
   Value,
 ])
-export {
-  AbstractSelectProps,
-  SelectValue,
-}
 
 const SelectProps = {
   ...AbstractSelectProps,
@@ -79,6 +75,12 @@ const SelectPropTypes = {
   choiceTransitionName: PropTypes.string,
 }
 
+export {
+  AbstractSelectProps,
+  SelectValue,
+  SelectProps,
+}
+
 export default {
   Option,
   OptGroup,

components/vc-pagination/Options.vue

@@ -7,6 +7,7 @@ export default {
   mixins: [BaseMixin],
   props: {
     rootPrefixCls: PropTypes.String,
+    selectPrefixCls: PropTypes.String,
     changeSize: PropTypes.func,
     quickGo: PropTypes.func,
     selectComponentClass: PropTypes.any,
@@ -24,8 +25,8 @@ export default {
     }
   },
   methods: {
-    defaultBuildOptionText (value) {
-      return `${value} ${this.locale.items_per_page}`
+    defaultBuildOptionText (opt) {
+      return `${opt.value} ${this.locale.items_per_page}`
     },
     handleChange (e) {
       this.setState({
@@ -50,7 +51,7 @@ export default {
     },
   },
   render () {
-    const { rootPrefixCls, locale, changeSize, quickGo, goButton, buildOptionText, selectComponentClass: Select, defaultBuildOptionText } = this
+    const { rootPrefixCls, locale, changeSize, quickGo, goButton, selectComponentClass: Select, defaultBuildOptionText } = this
     const prefixCls = `${rootPrefixCls}-options`
     let changeSelect = null
     let goInput = null
@@ -63,8 +64,9 @@ export default {
     if (changeSize && Select) {
       const Option = Select.Option
       const pageSize = this.pageSize || this.pageSizeOptions[0]
+      const buildOptionText = this.buildOptionText || defaultBuildOptionText
       const options = this.pageSizeOptions.map((opt, i) => (
-        <Option key={i} value={opt}>{buildOptionText ? buildOptionText(opt) : defaultBuildOptionText(opt)}</Option>
+        <Option key={i} value={opt}>{buildOptionText({ value: opt })}</Option>
       ))
 
       changeSelect = (

components/vc-pagination/Pagination.vue

@@ -41,6 +41,7 @@ export default {
     showQuickJumper: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(false),
     showTitle: PropTypes.bool.def(true),
     pageSizeOptions: PropTypes.arrayOf(PropTypes.string),
+    buildOptionText: PropTypes.func,
     showTotal: PropTypes.func,
     simple: PropTypes.bool,
     locale: PropTypes.object.def(LOCALE),
@@ -481,6 +482,7 @@ export default {
     }
     const prevDisabled = !this.hasPrev()
     const nextDisabled = !this.hasNext()
+    const buildOptionText = this.buildOptionText || this.$scopedSlots.buildOptionText
     return (
       <ul
         class={`${prefixCls}`}
@@ -517,6 +519,7 @@ export default {
           current={stateCurrent}
           pageSize={statePageSize}
           pageSizeOptions={this.pageSizeOptions}
+          buildOptionText={buildOptionText || null}
           quickGo={this.showQuickJumper ? this.handleChange : null}
           goButton={goButton}
         />

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/vc-dialog/demo/${d}.vue`),
+    component: import(`../components/vc-pagination/demo/${d}.vue`),
   }
 }
 export default [