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>
|
<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`
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -71,7 +71,7 @@
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
validator (value) {
|
validator (value) {
|
||||||
return oneOf(value, ['small', 'large']);
|
return oneOf(value, ['small', 'large', 'default']);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
labelInValue: {
|
labelInValue: {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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",
|
||||||
|
|
Loading…
Add table
Reference in a new issue