-
Notifications
You must be signed in to change notification settings - Fork 1
/
4315-e5bca41dda7c8ce60fb7.js
1 lines (1 loc) · 50.7 KB
/
4315-e5bca41dda7c8ce60fb7.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4315],{94315:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>z});var t=s(73450),p=s(27378),e=s(57318),o=s(31770),c=s(82148),u=s(36055),l=s(24246);function i(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,t)}return s}function r(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?i(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):i(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var k=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:1}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:a,pageSize:s,total:101,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(o.t,{current:a,pageSize:s,total:101,onChange:this.onChange,buttonBordered:!1}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:a,pageSize:s,total:101,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:a,pageSize:s,total:101,onChange:this.onChange})]})}}return(0,l.jsx)(n,{})},d=function(){var n=[10,20,30];class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var a=this.state,s=a.current,t=a.pageSize;return(0,l.jsx)("div",{children:(0,l.jsx)(o.t,{current:s,pageSize:t,pageSizeOptions:n,total:101,onChange:this.onChange})})}}return(0,l.jsx)(a,{})},g=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:a,pageSize:s,total:0,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:a,pageSize:s,total:0,onChange:this.onChange}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:a,pageSize:s,total:0,onChange:this.onChange})]})}}return(0,l.jsx)(n,{})},m=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:2}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var n=this.state,a=n.current,s=n.pageSize;return(0,l.jsx)("div",{children:(0,l.jsx)(o.t,{current:a,pageSize:s,total:101,formatTotal:n=>"一百零一",onChange:this.onChange})})}}return(0,l.jsx)(n,{})},h=function(){var n=101;class a extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{pageSize:10,current:11}),(0,t.Z)(this,"onChange",(n=>{this.setState(n)}))}render(){var a=this.state,s=a.current,t=a.pageSize;return(0,l.jsxs)("div",{children:[(0,l.jsx)(o.t,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}}),(0,l.jsx)("br",{}),(0,l.jsx)(c.w,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}}),(0,l.jsx)("br",{}),(0,l.jsx)(u.m,{current:s,pageSize:t,total:n,onChange:this.onChange,lastPageHelp:{content:"数据最多支持查看 %d 条".replace("%d",n)}})]})}}return(0,l.jsx)(a,{})};function y(n){return(0,l.jsx)(n.tag,r(r({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function b(n){return(0,l.jsx)(y,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return(0,l.jsx)(y,{tag:"style",html:n.style})}function v(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),v(n.parentNode,a);return a}class f extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return(0,l.jsxs)("div",{className:"zandoc-react-demo",children:[(0,l.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,l.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,l.jsx)("div",{className:"zandoc-react-demo__title",children:(0,l.jsx)("p",{children:s||""})}),(0,l.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,l.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,l.jsx)(y,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class z extends p.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,e.l)(document.documentElement,0,v(a,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(j,{style:""}),p.createElement(b,{html:'<h2 class="anchor-heading"><a href="#pagination-fen-ye-qi">¶</a><a href="javascript:void(0)" id="pagination-fen-ye-qi" class="anchor-point"></a>Pagination 分页器</h2>\n<p>内容或数据拆分成多个页面，并提供跳转能力。</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),p.createElement(f,{title:"基础用法",id:"Demo01basic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">buttonBordered</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Test</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(k)),p.createElement(f,{title:"修改分页大小",id:"Demo02dynamicpagesize",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">PAGE_SIZE_OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSizeOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">PAGE_SIZE_OPTIONS</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Test</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(d)),p.createElement(f,{title:"无数据",id:"Demo03empty",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Test</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(f,{title:"格式化总数展示",id:"Demo04format",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">101</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">formatTotal</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">total</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token string">\'一百零一\'</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Test</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(m)),p.createElement(f,{title:"最后一页帮助提示",id:"Demo05lastpagehelp",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Pagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">MiniPagination</span><span class="token punctuation">,</span> <span class="token maybe-class-name">LitePagination</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">TOTAL</span> <span class="token operator">=</span> <span class="token number">101</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Test</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">pageSize</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\n <span class="token literal-property property">current</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> current<span class="token punctuation">,</span> pageSize <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">LitePagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MiniPagination</span></span>\n <span class="token attr-name">current</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>current<span class="token punctuation">}</span></span>\n <span class="token attr-name">pageSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>pageSize<span class="token punctuation">}</span></span>\n <span class="token attr-name">total</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">TOTAL</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">lastPageHelp</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">\'数据最多支持查看 %d 条\'</span><span class="token punctuation">.</span><span class="token method function property-access">replace</span><span class="token punctuation">(</span><span class="token string">\'%d\'</span><span class="token punctuation">,</span> <span class="token constant">TOTAL</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Test</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(h)),p.createElement(b,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#pagination">¶</a><a href="javascript:void(0)" id="pagination" class="anchor-point"></a>Pagination</h4>\n<p>⚠️ 注意：API 不向下兼容老版的分页组件。</p>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>formatTotal</td>\n<td>格式化展示的总数</td>\n<td><code>(total: number) => React.ReactNode</code></td>\n<td><code>identity</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSizeOptions</td>\n<td>分页选项</td>\n<td><code>Array<number></code>\n \n|\n \n<code>Array<{text: node, value: number}></code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showQuickJumper</td>\n<td>是否可以快速跳转到指定页</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showSizeChanger</td>\n<td>是否可以改变分页大小</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>buttonBordered</td>\n<td>按钮是否有边框</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#litepagination">¶</a><a href="javascript:void(0)" id="litepagination" class="anchor-point"></a>LitePagination</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSizeOptions</td>\n<td>分页选项</td>\n<td><code>Array<number></code>\n \n|\n \n<code>Array<{text: node, value: number}></code></td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showQuickJumper</td>\n<td>是否可以快速跳转到指定页</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showSizeChanger</td>\n<td>是否可以改变分页大小</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>buttonBordered</td>\n<td>按钮是否有边框</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#minipagination">¶</a><a href="javascript:void(0)" id="minipagination" class="anchor-point"></a>MiniPagination</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必填</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onChange</td>\n<td>翻页和分页大小改变时的回调</td>\n<td><code>({pageSize: number, current: number}) => any</code></td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>current</td>\n<td>当前页数</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>total</td>\n<td>总个数</td>\n<td><code>number</code></td>\n<td><code>0</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>pageSize</td>\n<td>每页个数</td>\n<td><code>number</code></td>\n<td><code>10</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>buttonBordered</td>\n<td>按钮是否有边框</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>lastPageHelp</td>\n<td>最后一页时下一页按钮的帮助提示</td>\n<td><code>IPopProps</code></td>\n<td>默认样式</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>'}))}}}}]);