CNumerical 数值显示

功能说明

用于以美观的方式展示一组数值及其标题的组件，支持小数点分隔显示，可以自适应不同数量的数值项，并支持点击事件。

引用方式

import CNumerical from '@components/layout/numerical';

组件参数

• values (Array，必选)：数值集合，数组中的每项为对象，包含以下属性：
• title (String)：数值项的标题
• value (Number|String)：要显示的数值
• textType (String，可选)：文本颜色类型，对应 CSS 类 'm-text-{textType}'
• onClick (Function，可选)：点击数值项时的回调函数，接收当前项对象作为参数

使用示例

基础用法

<template>
  <view class="page">
    <CNumerical :values="numericalValues" />
  </view>
</template>

<script>
import CNumerical from '@components/layout/numerical';

export default {
  components: {
    CNumerical
  },
  data() {
    return {
      numericalValues: [
        {
          title: '今日销量',
          value: 135
        },
        {
          title: '月销量',
          value: 3254
        },
        {
          title: '总销量',
          value: 58962
        }
      ]
    }
  }
}
</script>

带颜色样式和点击事件

<template>
  <view class="page">
    <CNumerical :values="numericalValues" />
  </view>
</template>

<script>
import CNumerical from '@components/layout/numerical';

export default {
  components: {
    CNumerical
  },
  data() {
    return {
      numericalValues: [
        {
          title: '收入(元)',
          value: 9856.75,
          textType: 'primary'
        },
        {
          title: '支出(元)',
          value: 4328.50,
          textType: 'warning'
        },
        {
          title: '详情',
          value: 0,
          onClick: (item) => {
            console.log('用户点击了详情');
            // 跳转到详情页或显示详情弹窗
          }
        }
      ]
    }
  }
}
</script>

注意事项

1. 组件会根据传入的数值项数量自动调整布局：

• 当数量能被3整除时，每行显示3个项目
• 当数量除以3余1时，最后4个项目每行显示2个
• 当数量除以3余2时，最后2个项目独占一行
• 当只有1个项目时，占满整行

1. 数值会自动分离整数和小数部分，整数部分字体较大，小数部分字体较小
2. 当整数部分超过4位数时，小数部分的字体会进一步缩小
3. 具有onClick属性的项目会显示一个向右的箭头，并增加点击样式
4. textType属性可以控制数值的颜色，通过添加类名 'm-text-{textType}' 实现