响应式宽高计算工具函数
前言
最近在构建公司官网，需要用到响应式的轮播图组件，于是就通过element-plus改造了轮播图组件。为了实现响应式，我需要监听窗口大小变化，根据窗口宽度动态调整轮播图的宽度和高度。
关联页面
代码示例
// 宽高计算工具函数
/**
* 根据基础宽度和目标宽度计算对应的宽度
* @param {number} baseWidth - 基础宽度（默认1920）
* @param {number} targetWidth - 目标宽度（例如540）
* @param {number} currentWindowWidth - 当前窗口宽度
* @returns {number} 计算后的宽度
*/
export const calculateWidth = (targetWidth, currentWindowWidth, baseWidth = 1920) => {
return (currentWindowWidth * targetWidth) / baseWidth
}
/**
* 根据基础宽高比和目标宽度计算对应的高度
* @param {number} baseWidth - 基础宽度（默认1920）
* @param {number} baseHeight - 基础高度（例如710）
* @param {number} targetWidth - 目标宽度
* @returns {number} 计算后的高度
*/
export const calculateHeight = (baseWidth, baseHeight, targetWidth) => {
return (targetWidth * baseHeight) / baseWidth
}
使用示例
import { calculateWidth, calculateHeight } from '@/utils/dimensionCalculator'
import { useWindowResize } from '@/composables/useWindowResize'
// 使用窗口大小监听组合式函数
useWindowResize(() => {
calculateDimensions()
})
const galleryHeight = ref(844)
const galleryWidth = ref(564)
// 计算轮播图高度和小图片尺寸
const calculateDimensions = () => {
const windowWidth = window.innerWidth
// 1920宽度下高度844，按比例计算
galleryHeight.value = calculateHeight(1920, 844, windowWidth)
galleryWidth.value = calculateWidth(564, windowWidth)
}