北京丰台网站建设公司,如何制作网页效果图,莱芜在线论坛莱芜话题王作泉,wordpress首页添加文章列表文章目录 前言Decimal组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言
今天要封装的Decimal 组件#xff0c;是通过传入的属性进行定制化显示数值#xff0c;在渲染时#xff0c;会根据不同的情况显示整数部分、小数部分和单位#xff0c;支持自定义样式… 文章目录 前言Decimal组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言
今天要封装的Decimal 组件是通过传入的属性进行定制化显示数值在渲染时会根据不同的情况显示整数部分、小数部分和单位支持自定义样式、布局和单位同时根据数值正负情况显示不同样式适用于准确展示各种类型的数值数据。
Decimal组件
1. 功能分析 1支持不同的样式type显示类型layout布局类型 2支持是否显示小数点后全部小数部分或默认8位小数display属性 3支持显示不同的单位unit属性 4结合type属性判断是否根据数值的正负情况显示不同的样式 5使用useMemo避免重复计算并且使用 BigNumber 来进行精确的数值计算操作 6支持传入 className 自定义类名来修改样式 2. 代码详细注释
// /components/Decimal/index.tsx
import { useMemo, FC } from react;
import BigNumber from bignumber.js;
import classNames from classnames;
import { DecimalContainer } from ./styled;// 组件的属性类型
type Props {value: string; // 要显示的数值type?: value | compare; // 显示类型默认为 value当需要显示正负值并且有颜色区分时使用comparelayout?: responsive | fixed; // 布局类型默认为 fixed响应式为responsiveunit?: CKB | string | null; // 显示的单位默认为 CKBdisplay?: full | short; // 显示样式默认为 short显示小数点后8位为full时显示全部小数部分className?: string; // 自定义的类名
};const Decimal: FCProps (props) {// 解构属性const { value, type value, layout fixed, unit CKB, display short, className } props;// 使用 useMemo 缓存计算结果避免重复计算const [int, dec, status] useMemo(() {const c new BigNumber(value);// 将数值格式化为字符串并分割成整数部分和小数部分const [int, dec] c.toFormat(display short ? 8 : undefined).split(.);// 如果是比较模式并且数值不为零则返回整数部分和小数部分以及数值的正负if (type ! compare || c.isZero()) return [int, dec];if (c.isPositive()) return [int, dec, positive];return [int, dec, negative];}, [value, display, type]);return (DecimalContainer className{classNames(className)} data-type{type} data-value-status{status} data-layout{layout}span className{classNames(int)}{int}/span{dec span className{classNames(dec monospace)}{.${dec}}/span}{unit span className{unit monospace}{unit}/span}/DecimalContainer);
};export default Decimal;
------------------------------------------------------------------------------
// /components/Decimal/styled.tsx
import styled from styled-components;
import variables from /styles/variables.module.scss;
export const DecimalContainer styled.divdisplay: inline-flex;align-items: flex-end;font-size: 16px;white-space: nowrap;span.dec {font-size: 12px;}.unit {margin-left: 5px;}[data-typevalue] {span.dec {color: var(--cd-gray-light-3);}}[data-typecompare] {color: var(--cd-gray-light-3);[data-value-statuspositive] {color: var(--cd-primary-color);::before {content: ;}}[data-value-statusnegative] {color: var(--cd-danger-color);}}[data-layoutresponsive] {media (max-width: ${variables.mobileBreakPoint}) {font-size: 12px;span.dec {font-size: 10px;}.unit {font-size: 12px;}}}
;3. 使用方式
// 引入组件
import Decimal from /components/Decimal
// 使用
{/* PC端、正数 */}
Decimal value888888.00000066666666666600 typecompare /
{/* PC端、负数 */}
Decimal value-888888.00000066666666666600 typecompare /
{/* PC端、显示所有小数点 */}
Decimal value888888.00000066666666666600 displayfull /
{/* 移动端尺寸 */}
Decimal layoutresponsive value888888.00000066666666666600 typecompare /4. 效果展示 总结
下一篇讲【全局常用组件Echarts封装】。关注本栏目将实时更新。
