diff --git a/CHANGE.md b/CHANGE.md
index a1a85e1..ebf1cac 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -42,4 +42,6 @@ Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
### Cascader
Caspanel 的 sublist 从 prop -> data
### Select
-model 改为 value，支持 v-model
\ No newline at end of file
+model 改为 value，支持 v-model
+### Page
+class 改为 className
\ No newline at end of file
diff --git a/README.md b/README.md
index d070cb2..b2ecd38 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@
- [x] Menu
- [x] Tabs
- [x] Dropdown
-- [ ] Page
+- [x] Page
- [x] Breadcrumb
- [x] Steps
- [ ] LoadingBar
diff --git a/examples/app.vue b/examples/app.vue
index f51ad5a..061fdbe 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -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="/cascader">Cascader</router-link></li>
<li><router-link to="/select">Select</router-link></li>
+ <li><router-link to="/page">Page</router-link></li>
</ul>
</nav>
<router-view></router-view>
diff --git a/examples/main.js b/examples/main.js
index db866cc..18141ab 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -140,6 +140,10 @@ const router = new VueRouter({
{
path: '/select',
component: require('./routers/select.vue')
+ },
+ {
+ path: '/page',
+ component: require('./routers/page.vue')
}
]
});
diff --git a/examples/routers/page.vue b/examples/routers/page.vue
index bde2fa9..52df29c 100644
--- a/examples/routers/page.vue
+++ b/examples/routers/page.vue
@@ -1,9 +1,11 @@
<template>
- <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
- <br><br>
- <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
- <br><br>
- <Page :current="2" :total="50" simple></Page>
+ <div>
+ <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
+ <br><br>
+ <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
+ <br><br>
+ <Page :current="2" :total="50" simple></Page>
+ </div>
</template>
<script>
import { Page } from 'iview';
diff --git a/src/components/page/options.vue b/src/components/page/options.vue
index 6f6f726..851d73e 100644
--- a/src/components/page/options.vue
+++ b/src/components/page/options.vue
@@ -1,7 +1,7 @@
<template>
<div v-if="showSizer || showElevator" :class="optsClasses">
<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-select>
</div>
@@ -24,6 +24,7 @@
}
export default {
+ name: 'PageOption',
mixins: [ Locale ],
components: { iSelect, iOption },
props: {
@@ -36,6 +37,16 @@
allPages: Number,
isSmall: Boolean
},
+ data () {
+ return {
+ currentPageSize: this.pageSize
+ }
+ },
+ watch: {
+ pageSize (val) {
+ this.currentPageSize = val;
+ }
+ },
computed: {
size () {
return this.isSmall ? 'small' : 'default';
@@ -58,7 +69,7 @@
},
methods: {
changeSize () {
- this.$emit('on-size', this.pageSize);
+ this.$emit('on-size', this.currentPageSize);
},
changePage (event) {
let val = event.target.value.trim();
@@ -86,4 +97,4 @@
}
}
};
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/page/page.vue b/src/components/page/page.vue
index 9f09a80..b2d419f 100644
--- a/src/components/page/page.vue
+++ b/src/components/page/page.vue
@@ -6,10 +6,10 @@
@click="prev">
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
</li>
- <div :class="simplePagerClasses" :title="current + '/' + allPages">
+ <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
<input
type="text"
- :value="current"
+ :value="currentPage"
@keydown="keyDown"
@keyup="keyUp"
@change="keyUp">
@@ -34,13 +34,13 @@
<a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></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="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 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="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</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="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 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.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="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</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="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</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="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="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="t('i.page.next')"
@@ -50,11 +50,11 @@
</li>
<Options
:show-sizer="showSizer"
- :page-size="pageSize"
+ :page-size="currentPageSize"
:page-size-opts="pageSizeOpts"
:show-elevator="showElevator"
- :_current.once="current"
- :current.sync="current"
+ :_current.once="currentPage"
+ :current="currentPage"
:all-pages="allPages"
:is-small="isSmall"
@on-size="onSize"
@@ -70,6 +70,7 @@
const prefixCls = 'ivu-page';
export default {
+ name: 'Page',
mixins: [ Locale ],
components: { Options },
props: {
@@ -112,7 +113,7 @@
type: Boolean,
default: false
},
- class: {
+ className: {
type: String
},
style: {
@@ -121,15 +122,25 @@
},
data () {
return {
- prefixCls: prefixCls
+ prefixCls: prefixCls,
+ currentPage: this.current,
+ currentPageSize: this.pageSize
};
},
+ watch: {
+ current (val) {
+ this.currentPage = val;
+ },
+ pageSize (val) {
+ this.currentPageSize = val;
+ }
+ },
computed: {
isSmall () {
return !!this.size;
},
allPages () {
- const allPage = Math.ceil(this.total / this.pageSize);
+ const allPage = Math.ceil(this.total / this.currentPageSize);
return (allPage === 0) ? 1 : allPage;
},
simpleWrapClasses () {
@@ -137,7 +148,7 @@
`${prefixCls}`,
`${prefixCls}-simple`,
{
- [`${this.class}`]: !!this.class
+ [`${this.className}`]: !!this.className
}
];
},
@@ -148,7 +159,7 @@
return [
`${prefixCls}`,
{
- [`${this.class}`]: !!this.class,
+ [`${this.className}`]: !!this.className,
'mini': !!this.size
}
];
@@ -157,7 +168,7 @@
return [
`${prefixCls}-prev`,
{
- [`${prefixCls}-disabled`]: this.current === 1
+ [`${prefixCls}-disabled`]: this.currentPage === 1
}
];
},
@@ -165,7 +176,7 @@
return [
`${prefixCls}-next`,
{
- [`${prefixCls}-disabled`]: this.current === this.allPages
+ [`${prefixCls}-disabled`]: this.currentPage === this.allPages
}
];
},
@@ -173,7 +184,7 @@
return [
`${prefixCls}-item`,
{
- [`${prefixCls}-item-active`]: this.current === 1
+ [`${prefixCls}-item-active`]: this.currentPage === 1
}
];
},
@@ -181,34 +192,34 @@
return [
`${prefixCls}-item`,
{
- [`${prefixCls}-item-active`]: this.current === this.allPages
+ [`${prefixCls}-item-active`]: this.currentPage === this.allPages
}
];
}
},
methods: {
changePage (page) {
- if (this.current != page) {
- this.current = page;
+ if (this.currentPage != page) {
+ this.currentPage = page;
this.$emit('on-change', page);
}
},
prev () {
- const current = this.current;
+ const current = this.currentPage;
if (current <= 1) {
return false;
}
this.changePage(current - 1);
},
next () {
- const current = this.current;
+ const current = this.currentPage;
if (current >= this.allPages) {
return false;
}
this.changePage(current + 1);
},
fastPrev () {
- const page = this.current - 5;
+ const page = this.currentPage - 5;
if (page > 0) {
this.changePage(page);
} else {
@@ -216,7 +227,7 @@
}
},
fastNext () {
- const page = this.current + 5;
+ const page = this.currentPage + 5;
if (page > this.allPages) {
this.changePage(this.allPages);
} else {
@@ -224,7 +235,7 @@
}
},
onSize (pageSize) {
- this.pageSize = pageSize;
+ this.currentPageSize = pageSize;
this.changePage(1);
this.$emit('on-page-size-change', pageSize);
},
diff --git a/src/index.js b/src/index.js
index 26c0bb7..0c62a53 100644
--- a/src/index.js
+++ b/src/index.js
@@ -24,7 +24,7 @@ import Menu from './components/menu';
// import Message from './components/message';
// import Modal from './components/modal';
// import Notice from './components/notice';
-// import Page from './components/page';
+import Page from './components/page';
import Poptip from './components/poptip';
import Progress from './components/progress';
import Radio from './components/radio';
@@ -85,7 +85,7 @@ const iview = {
// Notice,
iOption: Option,
OptionGroup,
- // Page,
+ Page,
Panel: Collapse.Panel,
Poptip,
Progress,
--
libgit2 0.21.4