这段代码是一个基于Vue 3的进度条组件,可以在页面上显示用户滚动的进度,并随着页面滚动而更新:
-
模板部分(
<template>
): 这里定义了一个<div>
元素,其id为"progress-bar",通过ref="container"
为其创建了一个引用。 -
脚本部分(
<script setup>
): 这里使用了Vue 3的<script setup>
语法,可以让你更简洁地编写Vue组件。在脚本部分,首先引入了一些Vue生态系统的库,比如@vueuse/core
和vue
中的一些函数和组件。useWindowScroll
和useWindowSize
是从@vueuse/core
导入的,用于监听窗口的滚动和大小变化。ref
和watch
是从Vue的核心库中导入的,用于创建响应式数据和监听数据的变化。useCssVar
用于监听CSS变量的变化。
-
在脚本部分,定义了一个
ContainerHeight
,它是一个prop对象,指定了targetHeight
属性,表示容器的高度。 -
创建了一个响应式数据
container
,用于引用模板中的<div>
元素。 -
使用
useWindowScroll
获取页面滚动的位置y
,以及useWindowSize
获取窗口的宽度和高度。 -
使用
useCssVar
监听CSS变量--height
和--color
的变化。 -
使用
watch
监听页面滚动位置y
的变化,一旦y
发生变化,就会更新进度条的高度和颜色。- 通过计算滚动位置与容器高度的比例,来确定进度条的高度。
- 进度条的颜色也根据滚动位置来动态变化,这里使用了RGB颜色模式,颜色随着滚动位置的变化而变化。
-
样式部分(
<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>