perf(page): 新增 page next 插槽

docs/docs/zh-CN/components/page.md

@@ -50,6 +50,35 @@ export default {
 
 :::
 
+::: demo
+
+<template>
+  <lay-page :limit="limit" :total="total">
+    <template v-slot:prev>上</template>
+    <template v-slot:next>下</template>
+  </lay-page>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const limit = ref(20)
+    const total = ref(100)
+
+    return {
+      limit,
+      total
+    }
+  }
+}
+</script>
+
+:::
+
+
 ::: demo
 
 <template>
@@ -168,3 +197,13 @@ export default {
 |             |              |         |
 | ----------- | ------------ | ------- |
 | jump       | 切换回调     | { current: 当前页面 }    |
+
+
+::: field page slots
+
+:::
+
+|             |              |         |
+| ----------- | ------------ | ------- |
+| prev       | 上一页     | 上一页    |
+| next       | 下一页     | 下一页    |

docs/docs/zh-CN/guide/changelog.md

@@ -4,9 +4,11 @@
 ::: demo
 <template>
 <lay-timeline>
-<lay-timeline-item title="0.1.5">
+<lay-timeline-item title="0.1.6">
 [修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
 [修复] tab 选项卡 v-model 激活项 双绑。<br>
+[新增] page 分页 prev 插槽。<br>
+[新增] page 分页 next 插槽。<br>
 </lay-timeline-item>
 <lay-timeline-item title="0.1.4">
 [新增] button 按钮 loading 属性, 提供 加载 状态。<br>

src/module/page/index.vue

@@ -6,7 +6,8 @@
       class="layui-laypage-prev"
       :class="[currentPage === 1 ? 'layui-disabled' : '']"
       @click="prev()"
-      >上一页</a
+      ><slot name="prev" v-if="slots.prev"></slot>
+      <template v-else>上一页</template></a
     >
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
@@ -27,7 +28,8 @@
       class="layui-laypage-next"
       :class="[currentPage === totalPage ? 'layui-disabled' : '']"
       @click="next()"
-      >下一页</a
+      ><slot name="next" v-if="slots.next"></slot>
+      <template v-else>下一页</template></a
     ><span v-if="showLimit" class="layui-laypage-limits"
       ><select v-model="inlimit">
         <option value="10">10 条/页</option>
@@ -51,7 +53,9 @@
 </template>
 
 <script setup name="LayPage" lang="ts">
-import { defineProps, Ref, ref, watch } from 'vue'
+import { defineProps, Ref, ref, watch, useSlots } from 'vue'
+
+const slots = useSlots()
 
 const props = withDefaults(
   defineProps<{

src/use/index.ts

@@ -0,0 +1 @@
+import './useClickOutside.ts'

src/use/useClickOutside.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, onUnmounted, Ref } from 'vue'
 
-// 案例详见 tab.vue
+// 案例详见 dropdown.vue
 const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
   // 设置一个导出值
   const isClickOutside = ref(false);