如何给页面添加一个进度条

这段代码是一个基于Vue 3的进度条组件，可以在页面上显示用户滚动的进度，并随着页面滚动而更新：

1. 模板部分(<template>): 这里定义了一个<div>元素，其id为"progress-bar"，通过ref="container"为其创建了一个引用。

2. 脚本部分(<script setup>): 这里使用了Vue 3的<script setup>语法，可以让你更简洁地编写Vue组件。在脚本部分，首先引入了一些Vue生态系统的库，比如@vueuse/core和vue中的一些函数和组件。

   • useWindowScroll和useWindowSize是从@vueuse/core导入的，用于监听窗口的滚动和大小变化。
   • ref和watch是从Vue的核心库中导入的，用于创建响应式数据和监听数据的变化。
   • useCssVar用于监听CSS变量的变化。

3. 在脚本部分，定义了一个ContainerHeight，它是一个prop对象，指定了targetHeight属性，表示容器的高度。

4. 创建了一个响应式数据container，用于引用模板中的<div>元素。

5. 使用useWindowScroll获取页面滚动的位置y，以及useWindowSize获取窗口的宽度和高度。

6. 使用useCssVar监听CSS变量--height和--color的变化。

7. 使用watch监听页面滚动位置y的变化，一旦y发生变化，就会更新进度条的高度和颜色。

   • 通过计算滚动位置与容器高度的比例，来确定进度条的高度。
   • 进度条的颜色也根据滚动位置来动态变化，这里使用了RGB颜色模式，颜色随着滚动位置的变化而变化。

8. 样式部分(<style scoped>): 这里定义了进度条的样式。

   • position: fixed将进度条固定在页面上。
   • width: 10px定义了进度条的宽度。
   • 使用var(--height)和var(--color)来引用动态变化的CSS变量，从而实现进度条高度和颜色的动态变化。

这段代码的作用是创建一个能够随着用户滚动而更新的进度条组件，可以方便地添加到Vue项目中，并根据需要进行定制和调整。

<template>
    <div id="progress-bar" ref="container">

    </div>
</template>

<script setup>
import {useWindowScroll, useWindowSize} from '@vueuse/core'
import { useCssVar } from '@vueuse/core'
import {ref, watch} from "vue";

const ContainerHeight = defineProps({
    targetHeight:{
        type: Number,
        required: true
    }
})
const container = ref()
const { y } = useWindowScroll()
const { width, height } = useWindowSize()
const windowHeight = useCssVar('--height', container, { initialValue: y.value/ContainerHeight.target*100+'vh' })
const color = useCssVar('--color', container)

watch(y,()=>{
    let a = y.value/(ContainerHeight.targetHeight-height.value)
    let b = a*height.value
    windowHeight.value =  (y.value+b)/ContainerHeight.targetHeight*100+'vh'
    color.value = `rgb(66,${(y.value+b)/ContainerHeight.targetHeight*255},66)`
})
</script>

<style scoped>
#progress-bar{
    position: fixed;
    left: 0;
    top: 0;
    width: 10px;
    --color:rgb(0,0,0);
    --height:0;
    height: var(--height);
    background-color: var(--color);
}
</style>

使用方法：

// 引入组件
import ProgressBar from "@/components/ProgressBar.vue";


// 需要监控的组件
<div ref="container">
</div>

// 设置数据
import { useElementSize } from '@vueuse/core'

let container = ref()
const { width, height } = useElementSize(container)

// 放置组件
<ProgressBar :targetHeight="height"></ProgressBar>