更新记录

1.0.1（2025-04-14） 下载此版本

• 重构底层。

1.0.0（2025-04-11） 下载此版本

• 初始版本。

平台兼容性

kux-stylevalue-types

参考 style-value-types 实现的一个轻量级的 CSS 样式值处理库，支持解析、验证和转换常见类型（单位、颜色、复合值等）。适用于动画插值、样式动态计算等场景。

功能特性

• 类型验证：检测值是否为指定类型（如 px，rgba，complex）
• 解析与转换：将字符串解析为结构化对象，或将对象转换为合法 CSS 值
• 支持类型：数值、百分比、角度、颜色（RGB/HSL/Hex）、复合值等
• 自定义扩展：通过工具函数创建新类型（如 vw 单位）

快速开始

1. 单位类型处理

import { px, percent } from '@/uni_modules/kux-stylevalue-types';

// 验证是否为 px 值
px.test('10px'); // -> true
// 解析字符串为数值
px.parse('20px'); // -> 20
// 转换数值为带单位字符串
px.transform!(30); // -> '30px'

2. 颜色处理

import { rgba, color } from '@/uni_modules/kux-stylevalue-types';

// 解析 RGBA 颜色
const red = rgba.parse('rgba(255,0,0,0.5)');
// -> { red: 255, green: 0, blue: 0, alpha: 0.5 }

// 自动识别颜色类型并转换
color.transform!({ hue: 180, saturation: 50, lightness: 50 });
// -> 'hsla(180, 50%, 50%, 1)'

3. 复合值处理

import { complex } from '@/uni_modules/kux-stylevalue-types';

// 解析多值字符串
complex.parse('10px 20px');
// -> { '0': 10, '1': 20 }

// 创建动态模版
const transform = complex.transform!('scale(0) translateX(1)');
transform({ '0': 2, '1': 100 });
// -> scale(2) translateX(100)'

完整API

单位类型

percent.test('50%');    // → true
degrees.transform(180); // → '180deg'

基础类型

alpha.transform(1.2); // → 1
scale.parse(2);      // → 2

颜色类型

复合类型

处理多值组合（如 10px 20px、0 10px 5px 2px）：

complex.test('1px solid #fff'); // → true
// 解析为键值对对象
complex.parse('10 20'); // → { '0': 10, '1': 20 }
// 动态模板
const template = complex.createTransformer('0px 1px');
template({ '0': 100, '1': 200 }); // → '100px 200px'

自定义类型

使用内置工具创建新单位类型：

import { createUnitType } from '@/uni_modules/kux-stylevalue-types';

const vw = createUnitType('vw');
vw.transform(50); // → '50vw'

结语

kux 不生产代码，只做代码的搬运工，致力于提供uts 的 js 生态轮子实现，欢迎各位大佬在插件市场搜索使用 kux 生态插件：https://ext.dcloud.net.cn/search?q=kux

友情推荐

• TMUI4.0：包含了核心的uts插件基类.和uvue组件库
• GVIM即时通讯模版：GVIM即时通讯模版，基于uni-app x开发的一款即时通讯模版
• t-uvue-ui：T-UVUE-UI是基于UNI-APP X开发的前端UI框架
• UxFrame 低代码高性能UI框架：【F2图表、双滑块slider、炫酷效果tabbar、拖拽排序、日历拖拽选择、签名...】UniAppX 高质量UI库
• wx-ui 基于uni-app x开发的高性能混合UI库：基于uni-app x开发的高性能混合UI库，集成 uts api 和 uts component，提供了一套完整、高效且易于使用的UI组件和API，让您以更少的时间成本，轻松完成高性能应用开发。
• firstui-uvue：FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。
• easyXUI 不仅仅是UI 更是为UniApp X设计的电商模板库：easyX 不仅仅是UI库，更是一个轻量、可定制的UniAPP X电商业务模板库，可作为官方组件库的补充,始终坚持简单好用、易上手