drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Page

Browse source 
support Page
This commit is contained in:
梁灏 2017-03-07 10:32:46 +08:00
parent 4aec6a66bb
commit 87c515977f
8 changed files with 71 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGE.md
View file

@ -43,3 +43,5 @@ Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
Caspanel 的 sublist 从 prop -> data Caspanel 的 sublist 从 prop -> data
### Select ### Select
model 改为 value，支持 v-model model 改为 value，支持 v-model
### Page
class 改为 className

2
README.md
View file

@ -52,7 +52,7 @@
- [x] Menu - [x] Menu
- [x] Tabs - [x] Tabs
- [x] Dropdown - [x] Dropdown
- [ ] Page - [x] Page
- [x] Breadcrumb - [x] Breadcrumb
- [x] Steps - [x] Steps
- [ ] LoadingBar - [ ] LoadingBar

1
examples/app.vue
View file

@ -44,6 +44,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
<li><router-link to="/spin">Spin</router-link></li> <li><router-link to="/spin">Spin</router-link></li>
<li><router-link to="/cascader">Cascader</router-link></li> <li><router-link to="/cascader">Cascader</router-link></li>
<li><router-link to="/select">Select</router-link></li> <li><router-link to="/select">Select</router-link></li>
<li><router-link to="/page">Page</router-link></li>
</ul> </ul>
</nav> </nav>
<router-view></router-view> <router-view></router-view>

4
examples/main.js
View file

@ -140,6 +140,10 @@ const router = new VueRouter({
{ {
path: '/select', path: '/select',
component: require('./routers/select.vue') component: require('./routers/select.vue')
},
{
path: '/page',
component: require('./routers/page.vue')
} }
] ]
}); });

2
examples/routers/page.vue
View file

@ -1,9 +1,11 @@
<template> <template>
<div>
<Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page> <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
<br><br> <br><br>
<Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page> <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
<br><br> <br><br>
<Page :current="2" :total="50" simple></Page> <Page :current="2" :total="50" simple></Page>
</div>
</template> </template>
<script> <script>
import { Page } from 'iview'; import { Page } from 'iview';

15
src/components/page/options.vue
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" :size="size" @on-change="changeSize"> <i-select v-model="currentPageSize" :size="size" @on-change="changeSize">
<i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option> <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
</i-select> </i-select>
</div> </div>
@ -24,6 +24,7 @@
} }
export default { export default {
name: 'PageOption',
mixins: [ Locale ], mixins: [ Locale ],
components: { iSelect, iOption }, components: { iSelect, iOption },
props: { props: {
@ -36,6 +37,16 @@
allPages: Number, allPages: Number,
isSmall: Boolean isSmall: Boolean
}, },
data () {
return {
currentPageSize: this.pageSize
}
},
watch: {
pageSize (val) {
this.currentPageSize = val;
}
},
computed: { computed: {
size () { size () {
return this.isSmall ? 'small' : 'default'; return this.isSmall ? 'small' : 'default';
@ -58,7 +69,7 @@
}, },
methods: { methods: {
changeSize () { changeSize () {
this.$emit('on-size', this.pageSize); this.$emit('on-size', this.currentPageSize);
}, },
changePage (event) { changePage (event) {
let val = event.target.value.trim(); let val = event.target.value.trim();

67
src/components/page/page.vue
View file

@ -6,10 +6,10 @@
@click="prev"> @click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a> <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li> </li>
<div :class="simplePagerClasses" :title="current + '/' + allPages"> <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
<input <input
type="text" type="text"
:value="current" :value="currentPage"
@keydown="keyDown" @keydown="keyDown"
@keyup="keyUp" @keyup="keyUp"
@change="keyUp"> @change="keyUp">
@ -34,13 +34,13 @@
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a> <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li> </li>
<li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li> <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
<li :title="t('i.page.prev5')" v-if="current - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li> <li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
<li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li> <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
<li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li> <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
<li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li> <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
<li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li> <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
<li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li> <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
<li :title="t('i.page.next5')" v-if="current + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li> <li :title="t('i.page.next5')" v-if="currentPage + 3 < allPages" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
<li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li> <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
<li <li
:title="t('i.page.next')" :title="t('i.page.next')"
@ -50,11 +50,11 @@
</li> </li>
<Options <Options
:show-sizer="showSizer" :show-sizer="showSizer"
:page-size="pageSize" :page-size="currentPageSize"
:page-size-opts="pageSizeOpts" :page-size-opts="pageSizeOpts"
:show-elevator="showElevator" :show-elevator="showElevator"
:_current.once="current" :_current.once="currentPage"
:current.sync="current" :current="currentPage"
:all-pages="allPages" :all-pages="allPages"
:is-small="isSmall" :is-small="isSmall"
@on-size="onSize" @on-size="onSize"
@ -70,6 +70,7 @@
const prefixCls = 'ivu-page'; const prefixCls = 'ivu-page';
export default { export default {
name: 'Page',
mixins: [ Locale ], mixins: [ Locale ],
components: { Options }, components: { Options },
props: { props: {
@ -112,7 +113,7 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
class: { className: {
type: String type: String
}, },
style: { style: {
@ -121,15 +122,25 @@
}, },
data () { data () {
return { return {
prefixCls: prefixCls prefixCls: prefixCls,
currentPage: this.current,
currentPageSize: this.pageSize
}; };
}, },
watch: {
current (val) {
this.currentPage = val;
},
pageSize (val) {
this.currentPageSize = val;
}
},
computed: { computed: {
isSmall () { isSmall () {
return !!this.size; return !!this.size;
}, },
allPages () { allPages () {
const allPage = Math.ceil(this.total / this.pageSize); const allPage = Math.ceil(this.total / this.currentPageSize);
return (allPage === 0) ? 1 : allPage; return (allPage === 0) ? 1 : allPage;
}, },
simpleWrapClasses () { simpleWrapClasses () {
@ -137,7 +148,7 @@
`${prefixCls}`, `${prefixCls}`,
`${prefixCls}-simple`, `${prefixCls}-simple`,
{ {
[`${this.class}`]: !!this.class [`${this.className}`]: !!this.className
} }
]; ];
}, },
@ -148,7 +159,7 @@
return [ return [
`${prefixCls}`, `${prefixCls}`,
{ {
[`${this.class}`]: !!this.class, [`${this.className}`]: !!this.className,
'mini': !!this.size 'mini': !!this.size
} }
]; ];
@ -157,7 +168,7 @@
return [ return [
`${prefixCls}-prev`, `${prefixCls}-prev`,
{ {
[`${prefixCls}-disabled`]: this.current === 1 [`${prefixCls}-disabled`]: this.currentPage === 1
} }
]; ];
}, },
@ -165,7 +176,7 @@
return [ return [
`${prefixCls}-next`, `${prefixCls}-next`,
{ {
[`${prefixCls}-disabled`]: this.current === this.allPages [`${prefixCls}-disabled`]: this.currentPage === this.allPages
} }
]; ];
}, },
@ -173,7 +184,7 @@
return [ return [
`${prefixCls}-item`, `${prefixCls}-item`,
{ {
[`${prefixCls}-item-active`]: this.current === 1 [`${prefixCls}-item-active`]: this.currentPage === 1
} }
]; ];
}, },
@ -181,34 +192,34 @@
return [ return [
`${prefixCls}-item`, `${prefixCls}-item`,
{ {
[`${prefixCls}-item-active`]: this.current === this.allPages [`${prefixCls}-item-active`]: this.currentPage === this.allPages
} }
]; ];
} }
}, },
methods: { methods: {
changePage (page) { changePage (page) {
if (this.current != page) { if (this.currentPage != page) {
this.current = page; this.currentPage = page;
this.$emit('on-change', page); this.$emit('on-change', page);
} }
}, },
prev () { prev () {
const current = this.current; const current = this.currentPage;
if (current <= 1) { if (current <= 1) {
return false; return false;
} }
this.changePage(current - 1); this.changePage(current - 1);
}, },
next () { next () {
const current = this.current; const current = this.currentPage;
if (current >= this.allPages) { if (current >= this.allPages) {
return false; return false;
} }
this.changePage(current + 1); this.changePage(current + 1);
}, },
fastPrev () { fastPrev () {
const page = this.current - 5; const page = this.currentPage - 5;
if (page > 0) { if (page > 0) {
this.changePage(page); this.changePage(page);
} else { } else {
@ -216,7 +227,7 @@
} }
}, },
fastNext () { fastNext () {
const page = this.current + 5; const page = this.currentPage + 5;
if (page > this.allPages) { if (page > this.allPages) {
this.changePage(this.allPages); this.changePage(this.allPages);
} else { } else {
@ -224,7 +235,7 @@
} }
}, },
onSize (pageSize) { onSize (pageSize) {
this.pageSize = pageSize; this.currentPageSize = pageSize;
this.changePage(1); this.changePage(1);
this.$emit('on-page-size-change', pageSize); this.$emit('on-page-size-change', pageSize);
}, },

4
src/index.js
View file

@ -24,7 +24,7 @@ import Menu from './components/menu';
// import Message from './components/message'; // import Message from './components/message';
// import Modal from './components/modal'; // import Modal from './components/modal';
// import Notice from './components/notice'; // import Notice from './components/notice';
// import Page from './components/page'; import Page from './components/page';
import Poptip from './components/poptip'; import Poptip from './components/poptip';
import Progress from './components/progress'; import Progress from './components/progress';
import Radio from './components/radio'; import Radio from './components/radio';
@ -85,7 +85,7 @@ const iview = {
// Notice, // Notice,
iOption: Option, iOption: Option,
OptionGroup, OptionGroup,
// Page, Page,
Panel: Collapse.Panel, Panel: Collapse.Panel,
Poptip, Poptip,
Progress, Progress,