feat(Pagination): 完善分页组件

Author: ddzy

packages/components/pagination/lib/Pagination.scss

@@ -21,22 +21,24 @@
 		& > * {
 			margin-left: 6px;
 		}
-		.v3-pagination__pages-prev,
-		.v3-pagination__pages-next,
-		.v3-pagination__pages-item {
+		& > :first-child {
+			margin-left: 12px;
+		}
+		& > * {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 30px;
 			border: 1px solid transparent;
+			border-radius: $border-radius-width-small;
 			cursor: pointer;
 			user-select: none;
 			&:hover {
-				color: $success-color;
+				color: $primary-color;
 			}
 			&.is-active {
-				border-color: $success-color;
-				color: $success-color;
+				border-color: $primary-color;
+				color: $primary-color;
 			}
 		}
 		.v3-pagination__pages-prev,

packages/components/pagination/lib/Pagination.vue

@@ -12,15 +12,29 @@
 				/>
 			</div>
 			<div class="v3-pagination__pages">
-				<div class="v3-pagination__pages-prev">
+				<div class="v3-pagination__pages-prev" @click="handlePrevPage">
 					<V3Icon :type="'Left'" />
 				</div>
-				<div class="v3-pagination__pages-item">1</div>
-				<div class="v3-pagination__pages-item">2</div>
-				<div class="v3-pagination__pages-item">3</div>
-				<div class="v3-pagination__pages-item">4</div>
-				<div class="v3-pagination__pages-item">5</div>
-				<div class="v3-pagination__pages-next">
+				<div class="v3-pagination__pages-first"></div>
+				<div
+					class="v3-pagination__pages-fast-backward"
+					@mouseenter="isHoverFastBackward = true"
+					@mouseleave="isHoverFastBackward = false"
+				>
+					<V3Icon v-if="!isHoverFastBackward" :type="'More'" />
+					<V3Icon v-else :type="'DoubleLeft'" />
+				</div>
+				<div class="v3-pagination__pages-item" @click="handleTogglePage">1</div>
+				<div
+					class="v3-pagination__pages-fast-forward"
+					@mouseenter="isHoverFastForward = true"
+					@mouseleave="isHoverFastForward = false"
+				>
+					<V3Icon v-if="!isHoverFastForward" :type="'More'" />
+					<V3Icon v-else :type="'DoubleRight'" />
+				</div>
+				<div class="v3-pagination__pages-last"></div>
+				<div class="v3-pagination__pages-next" @click="handleNextPage">
 					<V3Icon :type="'Right'" />
 				</div>
 			</div>
@@ -38,7 +52,7 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { V3Icon, V3Input, V3Select } from '@components/main';
 import { isNumber } from 'lodash-es';
@@ -83,14 +97,28 @@ const props = withDefaults(defineProps<IPaginationProps>(), {
  * 跳至第n页
  */
 const customPage = ref();
-function handleInput(v: string) {
-	customPage.value = Number.parseInt(v.replace(/[^0-9]/g, '')) || '';
+function handleInput(e: InputEvent) {
+	const target = e.target as HTMLInputElement;
+	let value = target.value;
+	let valueToNumber = Number.parseInt(value.replace(/[^0-9]/g, ''));
+	customPage.value = !isNaN(valueToNumber) ? `${valueToNumber}` : undefined;
 }
+const computedCustomPage = computed(() => {
+	return Number.parseInt(customPage.value);
+});
 
 /**
  * n条/页
  */
 const customPageSize = ref(10);
+
+const isHoverFastForward = ref(false);
+
+const isHoverFastBackward = ref(false);
+
+function handlePrevPage() {}
+function handleTogglePage() {}
+function handleNextPage() {}
 </script>
 <style lang="scss">
 @import './Pagination.scss';