z自定义指令

src/components/back-top.vue

@@ -1,9 +1,5 @@
 <template>
-	<div
-		class="back-top"
-		@click="handleClick"
-		:class="[progress > 0 ? 'active' : 'hidden']"
-	>
+	<div class="back-top" @click="handleClick" v-scroll-progress="handleScroll">
 		<svg width="100%" height="100%" viewBox="-1 -1 102 102">
 			<path
 				d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
@@ -20,26 +16,17 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted, h } from "vue";
+	import { ref, onMounted, onUnmounted } from "vue";
 	const max = ref(98 * Math.PI);
 	const progress = ref(0);
-	const handleScroll = () => {
-		const el = document.documentElement;
-		const num = el.scrollTop / (el.scrollHeight - el.clientHeight);
-		progress.value = max.value * num;
+	const handleScroll = (e: number) => {
+		progress.value = (e / 100) * max.value;
 	};
 	const handleClick = () => {
 		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
 	};
-	onMounted(() => {
-		handleScroll();
-		document.addEventListener("scroll", handleScroll);
-	});
-	onUnmounted(() => {
-		document.removeEventListener("scroll", handleScroll);
-	});
 </script>
-<style scoped>
+<style scoped lang="less">
 	.back-top {
 		position: fixed;
 		right: 30px;
@@ -53,40 +40,43 @@
 		-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
 		box-shadow: inset 0 0 0 1px #e1e1e1;
 		z-index: 999;
-	}
-	.back-top svg {
-		width: 100%;
-		height: 100%;
-	}
-	.back-top path {
-		transition: stroke-dashoffset 10ms linear;
-	}
-	.back-top.active {
-		animation: active 0.2s linear both;
-	}
-	.back-top.hidden {
-		animation: hidden 0.2s linear both;
-	}
-	@keyframes active {
-		0% {
-			display: none;
-			opacity: 0;
-			transform: translateY(50px);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> svg {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			> path {
+				transition: stroke-dashoffset 10ms linear;
+			}
 		}
-		100% {
-			opacity: 1;
-			transform: translateY(0);
+
+		animation: back-top-hidden 0.2s linear both;
+		&.active {
+			animation: back-top-active 0.2s linear both;
 		}
-	}
-	@keyframes hidden {
-		0% {
-			opacity: 1;
-			transform: translateY(0);
+		@keyframes back-top-active {
+			0% {
+				display: none;
+				opacity: 0;
+				transform: translateY(15px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
 		}
-		100% {
-			opacity: 0;
-			transform: translateY(50px);
-			display: none;
+		@keyframes back-top-hidden {
+			0% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+			100% {
+				opacity: 0;
+				transform: translateY(15px);
+				display: none;
+			}
 		}
 	}
 </style>

src/components/header.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-//const props = defineProps({
-//})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-onMounted(()=>{
-})
-onUnmounted(()=>{
-})
-defineExpose({})
-const {} = toRefs(data);
-</script>
-<template>
-	<header class="header">
-	
-	</header>
-</template>
-<style lang="less" scoped>
-	.header{
-		position: relative;
-	}
-</style>

src/components/main-header.vue

@@ -0,0 +1,20 @@
+<template>
+	<header class="main-header" v-scroll-progress></header>
+</template>
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted } from "vue";
+</script>
+<style lang="less" scoped>
+	.main-header {
+		position: fixed;
+		width: 100%;
+		height: 85px;
+		top: 0;
+		left: 0;
+		z-index: 10000;
+		transition: background-color 0.2s linear;
+		&.active {
+			background-color: #0a0a0a;
+		}
+	}
+</style>