| 1 |
- import{e as s,o as a,G as t}from"./vendor.9cc7b6f2.js";const n={class:"markdown-body"},p=[t('<h1>Pagination 分页</h1><h3>介绍</h3><p>当数据量较多时，采用分页的形式分隔长列表。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { Pagination,Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'@nutui/nutui'</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Pagination).use(Icon);\n</code></pre><h3>基础用法</h3><p>通过 v-model 来绑定当前页码。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-pagination</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage"</span> <span class="hljs-attr">:total-items</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">:items-per-page</span>=<span class="hljs-string">"5"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"pageChange"</span> /></span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n <span class="hljs-keyword">const</span> state = reactive({\n <span class="hljs-attr">currentPage</span>: <span class="hljs-number">1</span>,\n <span class="hljs-attr">currentPage1</span>: <span class="hljs-number">1</span>,\n <span class="hljs-attr">currentPage2</span>: <span class="hljs-number">1</span>,\n <span class="hljs-attr">currentPage3</span>: <span class="hljs-number">1</span>\n });\n <span class="hljs-keyword">const</span> pageChange = <span class="hljs-function">(<span class="hljs-params">value</span>) =></span> {\n <span class="hljs-built_in">console</span>.log(value);\n };\n\n <span class="hljs-keyword">return</span> {\n ...toRefs(state),\n pageChange\n };\n }\n};\n</code></pre><h3>简单模式</h3><p>\b将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-pagination</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage1"</span> <span class="hljs-attr">:page-count</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"simple"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"pageChange"</span> /></span>\n</code></pre><h3>显示省略号</h3><p>设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-pagination</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage2"</span> <span class="hljs-attr">:total-items</span>=<span class="hljs-string">"125"</span> <span class="hljs-attr">:show-page-size</span>=<span class="hljs-string">"3"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"pageChange"</span> <span class="hljs-attr">force-ellipses</span>/></span>\n</code></pre><h3>自定义按钮</h3><p>设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。</p><pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">nut-pagination</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentPage3"</span> <span class="hljs-attr">:total-items</span>=<span class="hljs-string">"500"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"pageChange"</span> <span class="hljs-attr">:show-page-size</span>=<span class="hljs-string">"5"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">prev-text</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"left"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"10px"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">next-text</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">nut-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"right"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"10px"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">page</span>=<span class="hljs-string">"{ item }"</span>></span>\n {{ item.number == 3 ? 'hot' : item.text }}\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">nut-pagination</span>></span>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>v-model</td><td>当前页码</td><td>Number</td><td>1</td></tr><tr><td>mode</td><td>显示模式,可选值为 simple</td><td>String</td><td>multi</td></tr><tr><td>prev-text</td><td>上一页按钮文字</td><td>String</td><td>上一页</td></tr><tr><td>next-text</td><td>下一页按钮文字</td><td>String</td><td>下一页</td></tr><tr><td>page-count</td><td>总页数</td><td>String,Number</td><td>传入/根据页数计算</td></tr><tr><td>total-items</td><td>总记录数</td><td>String,Number</td><td>0</td></tr><tr><td>items-per-page</td><td>每页记录数</td><td>String,Number</td><td>10</td></tr><tr><td>show-page-size</td><td>显示的页码个数</td><td>String,Number</td><td>5</td></tr><tr><td>force-ellipses</td><td>是否显示省略号</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>页码改变时触发</td><td>value</td></tr></tbody></table><h3>Slots</h3><table><thead><tr><th>名称</th><th>描述</th><th>参数</th></tr></thead><tbody><tr><td>prev-text</td><td>自定义上一页按钮内容</td><td>-</td></tr><tr><td>next-text</td><td>自定义下一页按钮内容</td><td>-</td></tr><tr><td>page</td><td>自定义页码</td><td>-</td></tr></tbody></table>',25)],l={setup:(t,{expose:l})=>(l({frontmatter:{}}),(t,l)=>(a(),s("div",n,p)))};export{l as default};
|
