feat: add custom prev and next text

vue-bulma · Jan 27, 2019 · f9352c6 · f9352c6 · vercel · Jan 27, 2019
1 parent ec08f30
commit f9352c6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/examples/code/components/pagination.js b/examples/code/components/pagination.js
@@ -57,4 +57,13 @@ code.sizes = `\
 <vb-pagination :pageCount="5" size="large"></vb-pagination>
 `
 
+code.customText = `\
+<vb-pagination :pageCount="5" prev-text="上一页" next-text="下一页"></vb-pagination>
+
+<vb-pagination :pageCount="5">
+  <vb-icon slot="prev" name="fa fa-chevron-left"></vb-icon>
+  <vb-icon slot="next" name="fa fa-chevron-right"></vb-icon>
+</vb-pagination>
+`
+
 export default code
diff --git a/examples/components/components/Pagination.vue b/examples/components/components/Pagination.vue
@@ -42,6 +42,17 @@
         <vb-pagination :pageCount="5" size="large"></vb-pagination>
       </demo>
     </example-section-item>
+
+    <example-section-item title="Custom text">
+      <demo :code="code.customText">
+        <vb-pagination :pageCount="5" prev-text="上一页" next-text="下一页"></vb-pagination>
+
+        <vb-pagination :pageCount="5">
+          <vb-icon slot="prev" name="fa fa-chevron-left"></vb-icon>
+          <vb-icon slot="next" name="fa fa-chevron-right"></vb-icon>
+        </vb-pagination>
+      </demo>
+    </example-section-item>
   </vb-section>
 </template>
 

diff --git a/src/components/components/Pagination.vue b/src/components/components/Pagination.vue
@@ -1,11 +1,15 @@
 <template>
   <nav role="navigation" aria-label="pagination" :class="classes">
     <a class="pagination-previous" :disabled="!hasPrevPage" @click="prePage">
-      上一页
+      <slot name="prev">
+        {{ prevText || 'Previous' }}
+      </slot>
     </a>
 
     <a class="pagination-next" :disabled="!hasNextPage" @click="nextPage">
-      下一页
+      <slot name="next">
+        {{ nextText || 'Next page' }}
+      </slot>
     </a>
 
     <ul class="pagination-list">
@@ -74,7 +78,9 @@ export default {
       type: Number,
       default: 5
     },
-    rounded: Boolean
+    rounded: Boolean,
+    prevText: String,
+    nextText: String
   },
   data() {
     return {