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

Merge branch '2.0' into 2.0-backtop

Browse source
This commit is contained in:
Aresn 2017-03-07 10:36:10 +08:00 • committed by GitHub
commit 7d535fc915
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
### Select
model 改为 value，支持 v-model
### Page
class 改为 className

2
README.md
View file

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

1
examples/app.vue
View file

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

4
examples/main.js
View file

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

2
examples/routers/page.vue
View file

@ -1,9 +1,11 @@
<template>
<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';

15
src/components/page/options.vue
View file

@ -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();

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

@ -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);
},

4
src/index.js
View file

@ -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,