vue 如何制作一个跟随窗口大小变化而变化的组件
像下图中展示的那些统计数件就是跟随窗口变化而变化的,而且是几乎等比缩放的。
实现原理
只简略说一下原理。
- pinia 中记录一个窗口变化的高度值
- 给要变化的组件添加一个高度值
- 组件内部所有关于长度距离的值都通过这个传递的值生成
比如下面这个例子中的所有长度值都通过传递的唯一长度值 props.height
来生成
html
<template>
<div :class="['home-count-up', type, {'shadow': hasShadow}]" @click="routeToPath"
:style="`
width: ${props.height * 2.5}px;
padding: ${props.height * 5/ 50}px ${props.height * 13/ 50}px;
border-radius: ${props.height * 6 / 50}px
`">
<div class="icon">
<el-icon :size="props.height * 4 / 10" fill="black">
<component :is="icon"/>
</el-icon>
</div>
<div class="content">
<div class="label" :style="`font-size: ${props.height * 7 / 50}px`">{{label}}</div>
<CountUp class="value" :font-size="props.height * 15 / 50" :endVal="value"/>
</div>
</div>
</template>
这里有一个技巧:
当多个组件都需要跟 window.onresize 进行绑定时,可以这样写,就会同时触发多个:
js
window.addEventListener('resize', () => {
this.width = this.widthInit
this.height = this.heightInit
this.$nextTick(()=>{
this.resize()
})
})
下面这样就只能触发一个
js
window.onresize = () => {
this.width = this.widthInit
this.height = this.heightInit
this.$nextTick(()=>{
this.resize()
})
}