update Page component
change Page select size in mini type
This commit is contained in:
parent
b7cf983e43
commit
6932b4d73c
6 changed files with 16 additions and 6 deletions
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="showSizer || showElevator" :class="optsClasses">
|
||||
<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-select>
|
||||
</div>
|
||||
|
@ -31,9 +31,13 @@
|
|||
current: Number,
|
||||
_current: Number,
|
||||
pageSize: Number,
|
||||
allPages: Number
|
||||
allPages: Number,
|
||||
isSmall: Boolean
|
||||
},
|
||||
computed: {
|
||||
size () {
|
||||
return this.isSmall ? 'small' : 'default';
|
||||
},
|
||||
optsClasses () {
|
||||
return [
|
||||
`${prefixCls}-options`
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
:_current.once="current"
|
||||
:current.sync="current"
|
||||
:all-pages="allPages"
|
||||
:is-small="isSmall"
|
||||
@on-size="onSize"
|
||||
@on-page="onPage">
|
||||
</Options>
|
||||
|
@ -116,6 +117,9 @@
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
isSmall () {
|
||||
return !!this.size;
|
||||
},
|
||||
allPages () {
|
||||
const allPage = Math.ceil(this.total / this.pageSize);
|
||||
return (allPage === 0) ? 1 : allPage;
|
||||
|
|
|
@ -71,7 +71,7 @@
|
|||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
return oneOf(value, ['small', 'large', 'default']);
|
||||
}
|
||||
},
|
||||
labelInValue: {
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
</style>
|
||||
<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>
|
||||
<script>
|
||||
import { Modal, Button, Message, Page } from 'iview';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<Button @click="city = 'hangzhou'">切换城市</Button>
|
||||
<br>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iview",
|
||||
"version": "0.9.4rc-3",
|
||||
"version": "0.9.4rc-4",
|
||||
"title": "iView",
|
||||
"description": "A high quality UI components Library with Vue.js",
|
||||
"homepage": "http://www.iviewui.com",
|
||||
|
|
Loading…
Add table
Reference in a new issue