# CNumerical 数值显示 ## 功能说明 用于以美观的方式展示一组数值及其标题的组件,支持小数点分隔显示,可以自适应不同数量的数值项,并支持点击事件。 ## 引用方式 ```js import CNumerical from '@components/layout/numerical'; ``` ## 组件参数 - `values` (Array,必选):数值集合,数组中的每项为对象,包含以下属性: - `title` (String):数值项的标题 - `value` (Number|String):要显示的数值 - `textType` (String,可选):文本颜色类型,对应 CSS 类 'm-text-{textType}' - `onClick` (Function,可选):点击数值项时的回调函数,接收当前项对象作为参数 ## 使用示例 ### 基础用法 ```html ``` ### 带颜色样式和点击事件 ```html ``` ## 注意事项 1. 组件会根据传入的数值项数量自动调整布局: - 当数量能被3整除时,每行显示3个项目 - 当数量除以3余1时,最后4个项目每行显示2个 - 当数量除以3余2时,最后2个项目独占一行 - 当只有1个项目时,占满整行 2. 数值会自动分离整数和小数部分,整数部分字体较大,小数部分字体较小 3. 当整数部分超过4位数时,小数部分的字体会进一步缩小 4. 具有onClick属性的项目会显示一个向右的箭头,并增加点击样式 5. textType属性可以控制数值的颜色,通过添加类名 'm-text-{textType}' 实现