新增v-load-more 指令，新增分享列表分页功能

src/plugins/directive/index.ts

@@ -3,11 +3,13 @@ import type { App } from 'vue'
 import Contextmenu from './contextmenu'
 import ClickOutside from './clickOutside'
 import Tooltip from './tooltip'
+import LoadMore from './loadMore'
 
 export default {
   install(app: App) {
     app.directive('contextmenu', Contextmenu)
     app.directive('click-outside', ClickOutside)
     app.directive('tooltip', Tooltip)
+    app.directive('load-more', LoadMore)
   }
 }

src/plugins/directive/loadMore.ts

+import { Directive, DirectiveBinding } from "vue"
+
+const CTX_SCROLL_LOADMORE_HANDLER = 'CTX_SCROLL_LOADMORE_HANDLER'
+let LAST_TRIGGER_EVENT = 0
+interface CustomHTMLElement extends HTMLElement {
+  [CTX_SCROLL_LOADMORE_HANDLER]?: (event: Event) => void
+} 
+
+const callbackEvent = (event:any, binding: DirectiveBinding<any>)=>{
+    const that = event.target
+    if(that.scrollHeight - Math.ceil(that.scrollTop) - that.clientHeight <= 3){
+        if(LAST_TRIGGER_EVENT == 0 || (new Date()).getTime() - LAST_TRIGGER_EVENT >= 300){
+            binding.value()
+            LAST_TRIGGER_EVENT = (new Date()).getTime()
+        }
+    }
+}
+
+const LoadMoreDirective: Directive = {
+    mounted(el: CustomHTMLElement, binding) {
+        let obj = el.querySelector('.el-scrollbar__wrap')
+        if(obj){
+            console.log('找到元素')
+            el[CTX_SCROLL_LOADMORE_HANDLER] = (event: Event) => callbackEvent(event, binding)
+            obj.addEventListener('scroll', el[CTX_SCROLL_LOADMORE_HANDLER])
+        }else{
+            console.log('没有找到元素')
+        }
+    },
+    
+    unmounted(el: CustomHTMLElement) {
+        if (el[CTX_SCROLL_LOADMORE_HANDLER]) {
+            document.removeEventListener('scroll', el[CTX_SCROLL_LOADMORE_HANDLER])
+            delete el[CTX_SCROLL_LOADMORE_HANDLER]
+        }
+    },
+  }
+
+  export default LoadMoreDirective
\ No newline at end of file

src/utils/common.ts

@@ -59,7 +59,6 @@ export const getDaysBetween = (date1:any, date2:any) => {
 }
 
 export const formatDateTimeToRead = (dateStr:string,prefix:string='') =>{
-  console.log(dateStr)
   let minute = 1000 * 60;
   let hour = minute * 60;
   let day = hour * 24;

src/views/SellTemplate/Share.vue

@@ -29,7 +29,7 @@
             </div>
         </div>
         <div class="col full-width q-ml-md">
-            <el-table class="sample-table" :data="data" style="width: 100%" height="100%" v-loading="loading" @sort-change="sortHandler" :default-sort="{ prop: 'CreateTime', order: 'descending' }">
+            <el-table class="sample-table" v-load-more="tableScrollHandler" :data="data" style="width: 100%" height="100%" v-loading="loading" @sort-change="sortHandler" :default-sort="{ prop: 'CreateTime', order: 'descending' }">
                 <!-- <el-table-column type="selection" width="20" /> -->
                 <el-table-column className="indentLeft">
                     <template #header>
@@ -225,8 +225,9 @@ const clearNavigationHandler = async () => {
     await refreshHandler()
 }
 const refreshHandler = async () => {
-    queryObj.pageIndex=0
-    queryObj.pageCount=0
+    queryObj.pageIndex=1
+    queryObj.pageCount=1
+    pageCount.value=1
     data.value=[]
     refreshLoading.value=true
     await getDocumentData()
@@ -288,6 +289,13 @@ const checkPositionHandler = (n:any)=>{
         emit('destroy-position')
     }
 }
+const tableScrollHandler = ()=>{
+    console.log('share 通知到底底部')
+    if(pageCount.value>queryObj.pageIndex){
+        queryObj.pageIndex++
+        getDocumentData()
+    }
+}
 
 watch(() => props.position,(n,o)=>{
   if(n){