sk-layout-utils v1.0.1

sk-layout-utils

sk-layout-utils 是一个简化布局计算的工具类，提供 calcRowDims 方法，支持 uni-app 和浏览器，确保布局在不同设备上的一致性和适应性。

安装

npm install sk-layout-utils

使用

import { calcRowDims } from 'sk-layout-utils';

const gap = 12; // 子项间隔
const itemWidth = 169.5; // 初始子项宽度
const itemHeight = 169.5; // 初始子项高度
const minimumColumns = 2; // 最小列数

const { itemWidth: calculatedItemWidth, itemHeight: calculatedItemHeight, rowWidth } = calcRowDims(gap, itemWidth, itemHeight, minimumColumns);
console.log(calculatedItemWidth, calculatedItemHeight, rowWidth);

方法

calcRowDims(gap, itemWidth, itemHeight, minimumColumns, availableWidth)

• gap：子项之间的间隔和左右间距（必传）
• itemWidth：初始子项宽度（必传）
• itemHeight：初始子项高度（必传）
• minimumColumns：最小列数（必传）
• availableWidth：可用宽度（可选）

返回值：

• itemWidth：计算后的子项宽度
• itemHeight：计算后的子项高度
• rowWidth：整行的最大宽度

示例

import { calcRowDims } from 'sk-layout-utils';

const gap = 10;
const itemWidth = 150;
const itemHeight = 150;
const minimumColumns = 3;
const availableWidth = 800;

const result = calcRowDims(gap, itemWidth, itemHeight, minimumColumns, availableWidth);
console.log(result); // { itemWidth: 160, itemHeight: 160, rowWidth: 800 }

许可证

MIT