Matrix

Appearance

getComparisonStyle ​

描述 ​

根据基准值比较当前值，返回对应的颜色样式。该函数会比较当前值与基准值的大小关系，并根据比较结果返回相应的颜色样式。同时返回颜色值和CSS类名，支持自定义配置。当当前值无效时，返回even状态。

语法 ​

ts
getComparisonStyle(
  currentValue: number | string,
  options?: {
    baseValue?: number;
    colors?: {
      up?: string;
      down?: string;
      even?: string;
    };
    classNames?: {
      up?: string;
      down?: string;
      even?: string;
    };
  }
): {
  type: 'up' | 'down' | 'even';
  color: string;
  className: string;
}

参数 ​

  • currentValue (number | string): 当前要比较的值，支持数字或字符串
  • options (object, 可选): 配置选项
    • baseValue (number, 可选): 基准值，默认为0
    • colors (object, 可选): 自定义颜色配置
      • up (string, 可选): 上涨状态的颜色
      • down (string, 可选): 下跌状态的颜色
      • even (string, 可选): 持平状态的颜色
    • classNames (object, 可选): 自定义CSS类名配置
      • up (string, 可选): 上涨状态的CSS类名
      • down (string, 可选): 下跌状态的CSS类名
      • even (string, 可选): 持平状态的CSS类名

返回值 ​

  • type ('up' | 'down' | 'even'): 比较结果类型
    • 'up': 当前值大于基准值
    • 'down': 当前值小于基准值
    • 'even': 当前值等于基准值或无效
  • color (string): 颜色值
  • className (string): CSS类名

异常 ​

  • TypeError: 当 baseValue 不是数字时抛出

示例 ​

基本用法 ​

ts
import { getComparisonStyle } from '@fu/matrix';

// 数字输入 - 与0比较
getComparisonStyle(10);
// => { type: 'up', color: '#FF2436', className: 'stock-color-up' }

// 字符串输入 - 与0比较
getComparisonStyle('10');
// => { type: 'up', color: '#FF2436', className: 'stock-color-up' }

// 与指定基准值比较
getComparisonStyle(10, { baseValue: 5 });
// => { type: 'up', color: '#FF2436', className: 'stock-color-up' }

// 字符串输入与指定基准值比较
getComparisonStyle('8', { baseValue: 10 });
// => { type: 'down', color: '#07AB4B', className: 'stock-color-down' }

无效值处理 ​

ts
// 当前值无效时返回even
getComparisonStyle('invalid', { baseValue: 5 });
// => { type: 'even', color: '', className: 'stock-color-even' }

getComparisonStyle(NaN, { baseValue: 5 });
// => { type: 'even', color: '', className: 'stock-color-even' }

getComparisonStyle('', { baseValue: 5 });
// => { type: 'even', color: '', className: 'stock-color-even' }

自定义颜色配置 ​

ts
// 自定义颜色配置
getComparisonStyle(10, {
  baseValue: 5,
  colors: {
    up: '#00ff00',
    down: '#ff0000',
    even: '#999999'
  }
});
// => { type: 'up', color: '#00ff00', className: 'stock-color-up' }

// 部分自定义颜色
getComparisonStyle('3', {
  baseValue: 8,
  colors: { down: '#ff0000' }
});
// => { type: 'down', color: '#ff0000', className: 'stock-color-down' }

自定义CSS类名配置 ​

ts
// 自定义CSS类名配置
getComparisonStyle('8', {
  baseValue: 10,
  classNames: {
    up: 'custom-up',
    down: 'custom-down',
    even: 'custom-even'
  }
});
// => { type: 'down', color: '#07AB4B', className: 'custom-down' }

// 部分自定义CSS类名
getComparisonStyle('5', {
  baseValue: 5,
  classNames: { even: 'custom-even' }
});
// => { type: 'even', color: '', className: 'custom-even' }

实际应用场景 ​

ts
import { getComparisonStyle } from '@fu/matrix';

// 股票价格比较
const currentPrice = '15.5';
const basePrice = 12.0;
const priceStyle = getComparisonStyle(currentPrice, { baseValue: basePrice });

// 价格变化趋势判断
const priceChange = getComparisonStyle(currentPrice, { baseValue: basePrice });
if (priceChange.type === 'up') {
  console.log('价格上涨');
} else if (priceChange.type === 'down') {
  console.log('价格下跌');
} else {
  console.log('价格持平');
}

// 自定义样式的价格显示
const customPriceStyle = getComparisonStyle('18.5', {
  baseValue: 15.0,
  colors: {
    up: '#00ff00',
    down: '#ff0000',
    even: '#999999'
  },
  classNames: {
    up: 'price-up',
    down: 'price-down',
    even: 'price-even'
  }
});

// 批量处理价格数据
const prices = ['10.5', '12.3', '8.9', '15.2'];
const basePrice = 12.0;
const priceStyles = prices.map(price => 
  getComparisonStyle(price, { baseValue: basePrice })
);

// 统计价格变化
const upCount = priceStyles.filter(style => style.type === 'up').length;
const downCount = priceStyles.filter(style => style.type === 'down').length;
const evenCount = priceStyles.filter(style => style.type === 'even').length;

默认配置 ​

颜色配置 ​

  • 上涨 (up): #FF2436 (红色)
  • 下跌 (down): #07AB4B (绿色)
  • 持平 (even): '' (中性颜色)

CSS类名配置 ​

  • 上涨 (up): stock-color-up
  • 下跌 (down): stock-color-down
  • 持平 (even): stock-color-even

字符串转换规则 ​

函数会自动将字符串转换为数字：

  • 支持整数、小数、科学计数法、十六进制等格式
  • 无效字符串（如 'invalid'、''）会返回 even 状态
  • 支持负数字符串（如 '-5'）
  • 支持带 % 的字符串（如 '+123.45%'、'-50%'），会自动解析为对应的小数值
  • 支持带中文单位的字符串（如 '15万'、'-10亿'），会自动去掉单位后解析

兼容性 ​

  • 浏览器支持: ✅ 所有现代浏览器
  • Node.js 支持: ✅ 所有版本
  • TypeScript 支持: ✅ 完整类型定义

相关方法 ​

版本历史 ​

  • v1.0.0: 初始版本