chenhaodong / mew-iview

Commit 87c515977f140a51de2c4513e20bd4eb48f5d8a2

Authored by 梁灏
1 parent 4aec6a66

support Page 

support Page
Showing 8 changed files with 71 additions and 40 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @87c5159
... ... @@ -42,4 +42,6 @@ Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
42 42 ### Cascader
43 43 Caspanel 的 sublist 从 prop -> data
44 44 ### Select
45   -model 改为 value，支持 v-model
46 45 \ No newline at end of file
  46 +model 改为 value，支持 v-model
  47 +### Page
  48 +class 改为 className
47 49 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @87c5159
... ... @@ -52,7 +52,7 @@
52 52 - [x] Menu
53 53 - [x] Tabs
54 54 - [x] Dropdown
55   -- [ ] Page
  55 +- [x] Page
56 56 - [x] Breadcrumb
57 57 - [x] Steps
58 58 - [ ] LoadingBar
... ...
examples/app.vue
  Show/Hide comments   View file @87c5159
... ... @@ -44,6 +44,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
44 44 <li><router-link to="/spin">Spin</router-link></li>
45 45 <li><router-link to="/cascader">Cascader</router-link></li>
46 46 <li><router-link to="/select">Select</router-link></li>
  47 + <li><router-link to="/page">Page</router-link></li>
47 48 </ul>
48 49 </nav>
49 50 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @87c5159
... ... @@ -140,6 +140,10 @@ const router = new VueRouter({
140 140 {
141 141 path: '/select',
142 142 component: require('./routers/select.vue')
  143 + },
  144 + {
  145 + path: '/page',
  146 + component: require('./routers/page.vue')
143 147 }
144 148 ]
145 149 });
... ...
examples/routers/page.vue
  Show/Hide comments   View file @87c5159
1 1 <template>
2   - <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
3   - <br><br>
4   - <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
5   - <br><br>
6   - <Page :current="2" :total="50" simple></Page>
  2 + <div>
  3 + <Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
  4 + <br><br>
  5 + <Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
  6 + <br><br>
  7 + <Page :current="2" :total="50" simple></Page>
  8 + </div>
7 9 </template>
8 10 <script>
9 11 import { Page } from 'iview';
... ...
src/components/page/options.vue
  Show/Hide comments   View file @87c5159
1 1 <template>
2 2 <div v-if="showSizer || showElevator" :class="optsClasses">
3 3 <div v-if="showSizer" :class="sizerClasses">
4   - <i-select :model.sync="pageSize" :size="size" @on-change="changeSize">
  4 + <i-select v-model="currentPageSize" :size="size" @on-change="changeSize">
5 5 <i-option v-for="item in pageSizeOpts" :value="item" style="text-align:center;">{{ item }} {{ t('i.page.page') }}</i-option>
6 6 </i-select>
7 7 </div>
... ... @@ -24,6 +24,7 @@
24 24 }
25 25  
26 26 export default {
  27 + name: 'PageOption',
27 28 mixins: [ Locale ],
28 29 components: { iSelect, iOption },
29 30 props: {
... ... @@ -36,6 +37,16 @@
36 37 allPages: Number,
37 38 isSmall: Boolean
38 39 },
  40 + data () {
  41 + return {
  42 + currentPageSize: this.pageSize
  43 + }
  44 + },
  45 + watch: {
  46 + pageSize (val) {
  47 + this.currentPageSize = val;
  48 + }
  49 + },
39 50 computed: {
40 51 size () {
41 52 return this.isSmall ? 'small' : 'default';
... ... @@ -58,7 +69,7 @@
58 69 },
59 70 methods: {
60 71 changeSize () {
61   - this.$emit('on-size', this.pageSize);
  72 + this.$emit('on-size', this.currentPageSize);
62 73 },
63 74 changePage (event) {
64 75 let val = event.target.value.trim();
... ... @@ -86,4 +97,4 @@
86 97 }
87 98 }
88 99 };
89 100 -</script>
  101 +</script>
90 102 \ No newline at end of file
... ...
src/components/page/page.vue
  Show/Hide comments   View file @87c5159
... ... @@ -6,10 +6,10 @@
6 6 @click="prev">
7 7 <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
8 8 </li>
9   - <div :class="simplePagerClasses" :title="current + '/' + allPages">
  9 + <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
10 10 <input
11 11 type="text"
12   - :value="current"
  12 + :value="currentPage"
13 13 @keydown="keyDown"
14 14 @keyup="keyUp"
15 15 @change="keyUp">
... ... @@ -34,13 +34,13 @@
34 34 <a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a>
35 35 </li>
36 36 <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
37   - <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>
38   - <li :title="current - 2" v-if="current - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 2)"><a>{{ current - 2 }}</a></li>
39   - <li :title="current - 1" v-if="current - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(current - 1)"><a>{{ current - 1 }}</a></li>
40   - <li :title="current" v-if="current != 1 && current != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ current }}</a></li>
41   - <li :title="current + 1" v-if="current + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 1)"><a>{{ current + 1 }}</a></li>
42   - <li :title="current + 2" v-if="current + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(current + 2)"><a>{{ current + 2 }}</a></li>
43   - <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>
  37 + <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>
  38 + <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
  39 + <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
  40 + <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
  41 + <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
  42 + <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
  43 + <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>
44 44 <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
45 45 <li
46 46 :title="t('i.page.next')"
... ... @@ -50,11 +50,11 @@
50 50 </li>
51 51 <Options
52 52 :show-sizer="showSizer"
53   - :page-size="pageSize"
  53 + :page-size="currentPageSize"
54 54 :page-size-opts="pageSizeOpts"
55 55 :show-elevator="showElevator"
56   - :_current.once="current"
57   - :current.sync="current"
  56 + :_current.once="currentPage"
  57 + :current="currentPage"
58 58 :all-pages="allPages"
59 59 :is-small="isSmall"
60 60 @on-size="onSize"
... ... @@ -70,6 +70,7 @@
70 70 const prefixCls = 'ivu-page';
71 71  
72 72 export default {
  73 + name: 'Page',
73 74 mixins: [ Locale ],
74 75 components: { Options },
75 76 props: {
... ... @@ -112,7 +113,7 @@
112 113 type: Boolean,
113 114 default: false
114 115 },
115   - class: {
  116 + className: {
116 117 type: String
117 118 },
118 119 style: {
... ... @@ -121,15 +122,25 @@
121 122 },
122 123 data () {
123 124 return {
124   - prefixCls: prefixCls
  125 + prefixCls: prefixCls,
  126 + currentPage: this.current,
  127 + currentPageSize: this.pageSize
125 128 };
126 129 },
  130 + watch: {
  131 + current (val) {
  132 + this.currentPage = val;
  133 + },
  134 + pageSize (val) {
  135 + this.currentPageSize = val;
  136 + }
  137 + },
127 138 computed: {
128 139 isSmall () {
129 140 return !!this.size;
130 141 },
131 142 allPages () {
132   - const allPage = Math.ceil(this.total / this.pageSize);
  143 + const allPage = Math.ceil(this.total / this.currentPageSize);
133 144 return (allPage === 0) ? 1 : allPage;
134 145 },
135 146 simpleWrapClasses () {
... ... @@ -137,7 +148,7 @@
137 148 `${prefixCls}`,
138 149 `${prefixCls}-simple`,
139 150 {
140   - [`${this.class}`]: !!this.class
  151 + [`${this.className}`]: !!this.className
141 152 }
142 153 ];
143 154 },
... ... @@ -148,7 +159,7 @@
148 159 return [
149 160 `${prefixCls}`,
150 161 {
151   - [`${this.class}`]: !!this.class,
  162 + [`${this.className}`]: !!this.className,
152 163 'mini': !!this.size
153 164 }
154 165 ];
... ... @@ -157,7 +168,7 @@
157 168 return [
158 169 `${prefixCls}-prev`,
159 170 {
160   - [`${prefixCls}-disabled`]: this.current === 1
  171 + [`${prefixCls}-disabled`]: this.currentPage === 1
161 172 }
162 173 ];
163 174 },
... ... @@ -165,7 +176,7 @@
165 176 return [
166 177 `${prefixCls}-next`,
167 178 {
168   - [`${prefixCls}-disabled`]: this.current === this.allPages
  179 + [`${prefixCls}-disabled`]: this.currentPage === this.allPages
169 180 }
170 181 ];
171 182 },
... ... @@ -173,7 +184,7 @@
173 184 return [
174 185 `${prefixCls}-item`,
175 186 {
176   - [`${prefixCls}-item-active`]: this.current === 1
  187 + [`${prefixCls}-item-active`]: this.currentPage === 1
177 188 }
178 189 ];
179 190 },
... ... @@ -181,34 +192,34 @@
181 192 return [
182 193 `${prefixCls}-item`,
183 194 {
184   - [`${prefixCls}-item-active`]: this.current === this.allPages
  195 + [`${prefixCls}-item-active`]: this.currentPage === this.allPages
185 196 }
186 197 ];
187 198 }
188 199 },
189 200 methods: {
190 201 changePage (page) {
191   - if (this.current != page) {
192   - this.current = page;
  202 + if (this.currentPage != page) {
  203 + this.currentPage = page;
193 204 this.$emit('on-change', page);
194 205 }
195 206 },
196 207 prev () {
197   - const current = this.current;
  208 + const current = this.currentPage;
198 209 if (current <= 1) {
199 210 return false;
200 211 }
201 212 this.changePage(current - 1);
202 213 },
203 214 next () {
204   - const current = this.current;
  215 + const current = this.currentPage;
205 216 if (current >= this.allPages) {
206 217 return false;
207 218 }
208 219 this.changePage(current + 1);
209 220 },
210 221 fastPrev () {
211   - const page = this.current - 5;
  222 + const page = this.currentPage - 5;
212 223 if (page > 0) {
213 224 this.changePage(page);
214 225 } else {
... ... @@ -216,7 +227,7 @@
216 227 }
217 228 },
218 229 fastNext () {
219   - const page = this.current + 5;
  230 + const page = this.currentPage + 5;
220 231 if (page > this.allPages) {
221 232 this.changePage(this.allPages);
222 233 } else {
... ... @@ -224,7 +235,7 @@
224 235 }
225 236 },
226 237 onSize (pageSize) {
227   - this.pageSize = pageSize;
  238 + this.currentPageSize = pageSize;
228 239 this.changePage(1);
229 240 this.$emit('on-page-size-change', pageSize);
230 241 },
... ...
src/index.js
  Show/Hide comments   View file @87c5159
... ... @@ -24,7 +24,7 @@ import Menu from &#39;./components/menu&#39;;
24 24 // import Message from './components/message';
25 25 // import Modal from './components/modal';
26 26 // import Notice from './components/notice';
27   -// import Page from './components/page';
  27 +import Page from './components/page';
28 28 import Poptip from './components/poptip';
29 29 import Progress from './components/progress';
30 30 import Radio from './components/radio';
... ... @@ -85,7 +85,7 @@ const iview = {
85 85 // Notice,
86 86 iOption: Option,
87 87 OptionGroup,
88   - // Page,
  88 + Page,
89 89 Panel: Collapse.Panel,
90 90 Poptip,
91 91 Progress,
... ...