分页 组件 按钮 组件 快速回到 顶部 方法

Web/src/components/Abutton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button @click="">{{ text }}</button>
+  <button class="but" @click="handleClick">{{ text }}</button>
 </template>
 <script lang="ts" setup>
 // 1. 定义接收父组件传来的参数 props
@@ -15,3 +15,15 @@ const handleClick = (): any => {
 }
 
 </script>
+
+
+<style>
+.but {
+  text-decoration: underline;
+  color: #1e5494;
+  font-size: 18px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+</style>

Web/src/components/Pagination.vue

@@ -2,17 +2,17 @@
   <div class="pagination">
     <!-- 第一行：导航按钮 -->
     <div class="pagination-nav">
-      <a @click="goFirst">首页</a>
-      <a @click="goPrev">上一页</a>
-      <a @click="goNext">下一页</a>
-      <a @click="goLast">尾页</a>
+      <span v-if="currentPage !== 1" @click="changePage('first')">首页 . </span>
+      <span v-if="currentPage !== 1" @click="changePage('prev')">上一页 .</span>
+      <span v-if="currentPage !== totalPages" @click="changePage('next')">下一页 .</span>
+      <span v-if="currentPage !== totalPages" @click="changePage('last')">尾页</span>
     </div>
     <!-- 第二行：页码信息与跳转 -->
     <div class="pagination-info">
       <span>第{{ currentPage }}/{{ totalPages }}页</span>
-      <input v-model.number="inputPage" type="number" min="1" :max="totalPages" class="page-input"
-        @keyup.enter="goToPage" />
-      <button @click="goToPage">跳转</button>
+      <input v-model.number="currentPage" type="number" min="1" :max="totalPages" class="page-input"
+        @keyup.enter="changePage('input')" />
+      <button @click="changePage('input')">跳转</button>
     </div>
   </div>
 </template>
@@ -28,75 +28,61 @@ const props = withDefaults(defineProps<Props>(), {
   totalPages: 1,
 });
 
-const emit = defineEmits<{
-  (e: 'pageChange', page: number): void;
-}>();
+let currentPage = ref(props.currentPage)
+let totalPages = ref(props.totalPages)
 
-const inputPage = ref<number>(props.currentPage);
+const emit = defineEmits(['pageChange'])
 
-watch(() => props.currentPage, (newVal: number) => {
-  inputPage.value = newVal;
-});
 
-const goFirst = (): void => {
-  if (props.currentPage > 1) {
-    emit('pageChange', 1);
+const changePage = (type: any) => {
+  if (type == 'input' && currentPage.value < 1) {
+    currentPage.value = 1
+  }
+  if (type == 'input' && currentPage.value > totalPages.value) {
+    currentPage.value = totalPages.value
   }
-};
 
-const goPrev = (): void => {
-  if (props.currentPage > 1) {
-    emit('pageChange', props.currentPage - 1);
+  if (type == 'prev' && currentPage.value == 1) {
+    return
+  }
+  if (type == 'next' && currentPage.value == totalPages.value) {
+    return
   }
-};
 
-const goNext = (): void => {
-  if (props.currentPage < props.totalPages) {
-    emit('pageChange', props.currentPage + 1);
-  }
-};
 
-const goLast = (): void => {
-  if (props.currentPage < props.totalPages) {
-    emit('pageChange', props.totalPages);
+  if (type == 'first') {
+    currentPage.value = 1
+  } else if (type == 'prev') {
+    currentPage.value--
+  } else if (type == 'next') {
+    currentPage.value++
+  } else if (type == 'last') {
+    currentPage.value = totalPages.value
+  }
+  emit('pageChange', currentPage.value)
 }
-};
 
-const goToPage = (): void => {
-  let page: number = inputPage.value;
-  if (isNaN(page) || page < 1) {
-    page = 1;
-  } else if (page > props.totalPages) {
-    page = props.totalPages;
-  }
-  if (page !== props.currentPage) {
-    emit('pageChange', page);
-  }
-  inputPage.value = page;
-};
+
 </script>
 
 <style scoped>
 .pagination {
-  text-align: center;
+  text-align: left;
   font-size: 14px;
-  padding: 10px;
 }
 
 .pagination-nav {
   margin-bottom: 8px;
 }
 
-.pagination-nav a {
+.pagination-nav span {
   display: inline-block;
-  padding: 4px 8px;
-  margin: 0 4px;
   cursor: pointer;
   color: #0066cc;
-  text-decoration: underline;
+  margin-right: 5px;
 }
 
-.pagination-nav a.disabled {
+.pagination-nav span.disabled {
   color: #999;
   cursor: not-allowed;
   text-decoration: none;
@@ -105,7 +91,7 @@ const goToPage = (): void => {
 .pagination-info {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 8px;
 }
 

Web/src/extends/PageExtend.ts

@@ -9,4 +9,10 @@ export class PageExtend {
     return value ? String(value) : ''
   }
 
+  // 回到顶部函数 默认平滑滚动到顶部
+  public static ScrollToTop(behavior: ScrollBehavior = 'smooth') {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, behavior })
+    }
+  }
 }

Web/src/pages/customer/index.vue

@@ -8,9 +8,10 @@
         target="_blank">点击咨询</a><br />客服QQ：531493955<br />官方QQ群：238938639<br />客服邮箱：531493955@qq.com<br />
     </div>
     <Abar href="/">返回游戏首页</Abar>
+
     <!-- 分页组件示例 -->
     <div class="content" style="margin-top: 10px;">
-      <Pagination :currentPage="currentPage" :totalPages="totalPages" @pageChange="handlePageChange" />
+      <Pagination :currentPage="currentPage" :totalPages="totalPages" @pageChange="data" />
     </div>
   </div>
 </template>
@@ -32,17 +33,11 @@ const handlePageChange = (page: number): void => {
 };
 
 
-MessageExtend.ShowDialogAsyc('dada', 'dasda', async () => {
-  var result = await PubService.GetMain(StateHelper.Sid);
-  if (result.code == 0) {
 
-  }
-  else {
-    MessageExtend.ShowToast(result.msg, "fail");
-  }
-  return true
-})
 
+const data = (data: any) => {
+  console.log('子组件传的值', data);
+}
 
 
 onMounted(() => {