Skip to content

Commit

Permalink
2.0 (wmfe#96)
Browse files Browse the repository at this point in the history 
* update style

* rename file

* ignore dist

* update

* update pagination demo

* optimize style

* fix issue: wmfe#62

* migrate pagination to vue2.0

* update doc

* delete dumplicate event

* update pagination
  • Loading branch information
@g8up @clancyz
g8up authored and clancyz committed Feb 17, 2017
1 parent 0acb5b0 commit bd3fa9c
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 34 deletions.
33 changes: 10 additions & 23 deletions src/components/pagination/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
共<span v-text="total"></span>条
&nbsp;&nbsp;
每页
<select v-model="pageSizeInner" class="gray">
<select @change="changePageSize($event)" :value="pageSize" class="gray">
<option v-for="opt in pageSizeRange" :value="opt" v-text="opt">1</option>
</select>
条
Expand All @@ -25,10 +25,10 @@
<a class="apostrophe">...</a>
</button>

<button class="btn btn-default page-btn" v-for="number in (getRangePage.end - getRangePage.begin + 1)" :class="{'active': isActive(number)}">
<a v-if="isActive(number)" href="javascript:void(0);" v-text="number + getRangePage.begin - 1"></a>
<a v-else href="javascript:void(0);" v-text="number + getRangePage.begin - 1" @click="turnToPage(number + getRangePage.begin - 1)"></a>
</button>
<button class="btn btn-default page-btn" v-for="number in (getRangePage.end - getRangePage.begin + 1)" :class="{'active': isActive(number)}" @click="turnToPage(number + getRangePage.begin - 1)">
<a v-if="isActive(number)" href="javascript:void(0);" v-text="number + getRangePage.begin - 1"></a>
<a v-else href="javascript:void(0);" v-text="number + getRangePage.begin - 1" ></a>
</button>

<button class="btn btn-default page-btn" v-if="getRangePage.end < totalPageCount">
<a class="apostrophe">...</a>
Expand Down Expand Up @@ -100,14 +100,9 @@ export default {
}
}
},
data() {
return {
pageSizeInner: 20
};
},
computed: {
totalPageCount() {
return Math.ceil(this.total / this.pageSizeInner);
return Math.ceil(this.total / this.pageSize);
},
getRangePage() {
let curPage = this.currentPageNum;
Expand Down Expand Up @@ -152,18 +147,15 @@ export default {
return result;
}
},
watch: {
pageSizeInner(val) {
this.$emit('change-pagesize', this.pageSizeInner);
this.$emit('go-to-page', 1, this.currentPageNum);
}
},
methods: {
turnToPage(pageNo) {
if (pageNo > 0 && pageNo <= this.totalPageCount) {
this.$emit('go-to-page', pageNo, this.currentPageNum);// new page num / old page num
}
},
changePageSize($event) {
this.$emit('change-pagesize', Number($event.target.value));
},
prev() {
this.turnToPage(this.currentPageNum - 1);
},
Expand All @@ -173,9 +165,6 @@ export default {
isActive(number) {
return number + this.getRangePage.begin - 1 === this.currentPageNum;
}
},
mounted() {
this.pageSizeInner = this.pageSize;
}
};
</script>
Expand All @@ -189,7 +178,7 @@ export default {
margin: 0;
.btn{
a{
padding: 5px 12px;
color:#666;
&:focus{
background-color: initial;
}
Expand All @@ -202,8 +191,6 @@ export default {
}
// 枚举的页码按钮
.page-btn{
padding-left: 3px;
padding-right: 3px;
&.active{
background-color: #46c3c1;
border-color: #46c3c1;
Expand Down
32 changes: 21 additions & 11 deletions src/demos/pagination.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<template lang="md">
# Pagination页码
# Pagination 页码

## 使用场景

- 表格或其他需要分页的页面元素。
- 支持两种类型的页码： `Standard` 标准页码, 一般用于元素顶部； `Mini` 迷你页码，一般用于元素底部。
- 支持两种类型的页码： `Mini` 迷你页码，一般用于元素顶部， `Standard` 标准页码, 一般用于元素底部；

# Demo

Expand Down Expand Up @@ -37,6 +37,7 @@
<xcui-pagination
v-show="total > 0"
@go-to-page="goToPage"
@change-pagesize="onChangeSize"
:current-page-num="currentPageNum"
:total="total"
:page-size="pageSize"
Expand All @@ -45,16 +46,21 @@
</demo>

## Props
| 名字 | 类型 | 是否必选 | 默认 | 可选范围 | 描述 |
|----------------|---------|----------|-------------------|---------------------|-------------------------------------------------------------------|
| type | String | 否 | standard | standard,mini | 控制样式选择 |
| currentPageNum | Number | 否 | 1 | > 0 | 当前页码 |
| total | Number | 是 | 0 | >= 0 | 总条数 |
| pageSize | Number | 否 | 20 | 取自`pageSizeRange` | 每页条数 |
| withPageSize | Boolean | 否 | true | | 是否展示`pageSize`设置挂件 |
| pageSizeRange | Array | 否 | [10, 20, 50, 100] | | `pageSize`设置挂件的下拉菜单选项范围 `withPageSize`为 true 时生效 |
| rangeLength | Number | 否 | 10 | > 1 | 页码按钮的展示个数 |

| 名字 | 类型 | 默认 | 描述 | 可选范围 | 是否必选 |
|----------------|---------|-------------------|-------------------------------------------------------------------|---------------------|----------|
| type | String | standard | 控制样式选择 | standard,mini | 可选 |
| currentPageNum | Number | 1 | 当前页码 | > 0 | 可选 |
| total | Number | 0 | 总条数 | >= 0 | 必选 |
| pageSize | Number | 20 | 每页条数 | 取自`pageSizeRange` | 可选 |
| withPageSize | Boolean | true | 是否展示`pageSize`设置挂件 | | 可选 |
| pageSizeRange | Array | [10, 20, 50, 100] | `pageSize`设置挂件的下拉菜单选项范围 `withPageSize`为 true 时生效 | | 可选 |
| rangeLength | Number | 10 | 页码按钮的展示个数 | > 1 | 可选 |
## Events
| 名称 | 类型 | 是否必选 | 描述 |
|----------------|---------------------------|----------|-----------------------|
| goToPage | function(pageNum){ ... } | 是 | pageNum:跳转的页码 |
| changePagesize | function(pageSize){ ... } | 否 | pageSize:每页展示条数 |
</template>

<script>
Expand Down Expand Up @@ -88,6 +94,10 @@ export default {
this.list = list;
this.total = total;
this.currentPageNum = pageNo;
},
onChangeSize(pageSize) {
this.pageSize = pageSize;// 同步新页面
this.goToPage(1);// 切换到第一页
}
},
mounted() {
Expand Down

0 comments on commit bd3fa9c

Please sign in to comment.