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