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 | <template> | 1 | <template> |
2 | <div v-if="showSizer || showElevator" :class="optsClasses"> | 2 | <div v-if="showSizer || showElevator" :class="optsClasses"> |
3 | <div v-if="showSizer" :class="sizerClasses"> | 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 | <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} 条/页</i-option> | 5 | <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} 条/页</i-option> |
6 | </i-select> | 6 | </i-select> |
7 | </div> | 7 | </div> |
@@ -31,9 +31,13 @@ | @@ -31,9 +31,13 @@ | ||
31 | current: Number, | 31 | current: Number, |
32 | _current: Number, | 32 | _current: Number, |
33 | pageSize: Number, | 33 | pageSize: Number, |
34 | - allPages: Number | 34 | + allPages: Number, |
35 | + isSmall: Boolean | ||
35 | }, | 36 | }, |
36 | computed: { | 37 | computed: { |
38 | + size () { | ||
39 | + return this.isSmall ? 'small' : 'default'; | ||
40 | + }, | ||
37 | optsClasses () { | 41 | optsClasses () { |
38 | return [ | 42 | return [ |
39 | `${prefixCls}-options` | 43 | `${prefixCls}-options` |
components/page/page.vue
@@ -56,6 +56,7 @@ | @@ -56,6 +56,7 @@ | ||
56 | :_current.once="current" | 56 | :_current.once="current" |
57 | :current.sync="current" | 57 | :current.sync="current" |
58 | :all-pages="allPages" | 58 | :all-pages="allPages" |
59 | + :is-small="isSmall" | ||
59 | @on-size="onSize" | 60 | @on-size="onSize" |
60 | @on-page="onPage"> | 61 | @on-page="onPage"> |
61 | </Options> | 62 | </Options> |
@@ -116,6 +117,9 @@ | @@ -116,6 +117,9 @@ | ||
116 | } | 117 | } |
117 | }, | 118 | }, |
118 | computed: { | 119 | computed: { |
120 | + isSmall () { | ||
121 | + return !!this.size; | ||
122 | + }, | ||
119 | allPages () { | 123 | allPages () { |
120 | const allPage = Math.ceil(this.total / this.pageSize); | 124 | const allPage = Math.ceil(this.total / this.pageSize); |
121 | return (allPage === 0) ? 1 : allPage; | 125 | return (allPage === 0) ? 1 : allPage; |
components/select/select.vue
local/routers/index.vue
@@ -2,7 +2,9 @@ | @@ -2,7 +2,9 @@ | ||
2 | 2 | ||
3 | </style> | 3 | </style> |
4 | <template> | 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 | </template> | 8 | </template> |
7 | <script> | 9 | <script> |
8 | import { Modal, Button, Message, Page } from 'iview'; | 10 | import { Modal, Button, Message, Page } from 'iview'; |
local/routers/select.vue
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <!--<br><br><br><br><br><br><br><br><br><br><br>--> | 3 | + <br><br><br><br><br><br><br><br><br><br><br> |
4 | {{ city | json }}<br> | 4 | {{ city | json }}<br> |
5 | <Button @click="city = 'hangzhou'">切换城市</Button> | 5 | <Button @click="city = 'hangzhou'">切换城市</Button> |
6 | <br> | 6 | <br> |
package.json
1 | { | 1 | { |
2 | "name": "iview", | 2 | "name": "iview", |
3 | - "version": "0.9.4rc-3", | 3 | + "version": "0.9.4rc-4", |
4 | "title": "iView", | 4 | "title": "iView", |
5 | "description": "A high quality UI components Library with Vue.js", | 5 | "description": "A high quality UI components Library with Vue.js", |
6 | "homepage": "http://www.iviewui.com", | 6 | "homepage": "http://www.iviewui.com", |