Commit 6932b4d73c17c0c330e7fb5521537fd09236d1ff
1 parent
b7cf983e
update Page component
change Page select size in mini type
Showing
6 changed files
with
16 additions
and
6 deletions
Show diff stats
components/page/options.vue
| 1 | 1 | <template> |
| 2 | 2 | <div v-if="showSizer || showElevator" :class="optsClasses"> |
| 3 | 3 | <div v-if="showSizer" :class="sizerClasses"> |
| 4 | - <i-select :model.sync="pageSize" @on-change="changeSize"> | |
| 4 | + <i-select :model.sync="pageSize" :size="size" @on-change="changeSize"> | |
| 5 | 5 | <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} 条/页</i-option> |
| 6 | 6 | </i-select> |
| 7 | 7 | </div> |
| ... | ... | @@ -31,9 +31,13 @@ |
| 31 | 31 | current: Number, |
| 32 | 32 | _current: Number, |
| 33 | 33 | pageSize: Number, |
| 34 | - allPages: Number | |
| 34 | + allPages: Number, | |
| 35 | + isSmall: Boolean | |
| 35 | 36 | }, |
| 36 | 37 | computed: { |
| 38 | + size () { | |
| 39 | + return this.isSmall ? 'small' : 'default'; | |
| 40 | + }, | |
| 37 | 41 | optsClasses () { |
| 38 | 42 | return [ |
| 39 | 43 | `${prefixCls}-options` | ... | ... |
components/page/page.vue
| ... | ... | @@ -56,6 +56,7 @@ |
| 56 | 56 | :_current.once="current" |
| 57 | 57 | :current.sync="current" |
| 58 | 58 | :all-pages="allPages" |
| 59 | + :is-small="isSmall" | |
| 59 | 60 | @on-size="onSize" |
| 60 | 61 | @on-page="onPage"> |
| 61 | 62 | </Options> |
| ... | ... | @@ -116,6 +117,9 @@ |
| 116 | 117 | } |
| 117 | 118 | }, |
| 118 | 119 | computed: { |
| 120 | + isSmall () { | |
| 121 | + return !!this.size; | |
| 122 | + }, | |
| 119 | 123 | allPages () { |
| 120 | 124 | const allPage = Math.ceil(this.total / this.pageSize); |
| 121 | 125 | return (allPage === 0) ? 1 : allPage; | ... | ... |
components/select/select.vue
local/routers/index.vue
| ... | ... | @@ -2,7 +2,9 @@ |
| 2 | 2 | |
| 3 | 3 | </style> |
| 4 | 4 | <template> |
| 5 | - <Page :total="100" show-sizer></Page> | |
| 5 | + <Page :total="40" size="small"></Page> | |
| 6 | + <Page :total="40" size="small" show-elevator show-sizer></Page> | |
| 7 | + <Page :total="40" size="small" show-total></Page> | |
| 6 | 8 | </template> |
| 7 | 9 | <script> |
| 8 | 10 | import { Modal, Button, Message, Page } from 'iview'; | ... | ... |
local/routers/select.vue