update Page component

change Page select size in mini type
This commit is contained in:
梁灏 2016-10-25 09:10:02 +08:00
parent b7cf983e43
commit 6932b4d73c
6 changed files with 16 additions and 6 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<div v-if="showSizer || showElevator" :class="optsClasses"> <div v-if="showSizer || showElevator" :class="optsClasses">
<div v-if="showSizer" :class="sizerClasses"> <div v-if="showSizer" :class="sizerClasses">
<i-select :model.sync="pageSize" @on-change="changeSize"> <i-select :model.sync="pageSize" :size="size" @on-change="changeSize">
<i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} /</i-option> <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} /</i-option>
</i-select> </i-select>
</div> </div>
@ -31,9 +31,13 @@
current: Number, current: Number,
_current: Number, _current: Number,
pageSize: Number, pageSize: Number,
allPages: Number allPages: Number,
isSmall: Boolean
}, },
computed: { computed: {
size () {
return this.isSmall ? 'small' : 'default';
},
optsClasses () { optsClasses () {
return [ return [
`${prefixCls}-options` `${prefixCls}-options`

View file

@ -56,6 +56,7 @@
:_current.once="current" :_current.once="current"
:current.sync="current" :current.sync="current"
:all-pages="allPages" :all-pages="allPages"
:is-small="isSmall"
@on-size="onSize" @on-size="onSize"
@on-page="onPage"> @on-page="onPage">
</Options> </Options>
@ -116,6 +117,9 @@
} }
}, },
computed: { computed: {
isSmall () {
return !!this.size;
},
allPages () { allPages () {
const allPage = Math.ceil(this.total / this.pageSize); const allPage = Math.ceil(this.total / this.pageSize);
return (allPage === 0) ? 1 : allPage; return (allPage === 0) ? 1 : allPage;

View file

@ -71,7 +71,7 @@
}, },
size: { size: {
validator (value) { validator (value) {
return oneOf(value, ['small', 'large']); return oneOf(value, ['small', 'large', 'default']);
} }
}, },
labelInValue: { labelInValue: {

View file

@ -2,7 +2,9 @@
</style> </style>
<template> <template>
<Page :total="100" show-sizer></Page> <Page :total="40" size="small"></Page>
<Page :total="40" size="small" show-elevator show-sizer></Page>
<Page :total="40" size="small" show-total></Page>
</template> </template>
<script> <script>
import { Modal, Button, Message, Page } from 'iview'; import { Modal, Button, Message, Page } from 'iview';

View file

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<!--<br><br><br><br><br><br><br><br><br><br><br>--> <br><br><br><br><br><br><br><br><br><br><br>
{{ city | json }}<br> {{ city | json }}<br>
<Button @click="city = 'hangzhou'">切换城市</Button> <Button @click="city = 'hangzhou'">切换城市</Button>
<br> <br>

View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "0.9.4rc-3", "version": "0.9.4rc-4",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",