From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 117 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md b/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md
new file mode 100644
index 0000000..02abe60
--- /dev/null
+++ b/_cursor.ai/layout.doc/numerical.doc/CNumerical.doc.md
@@ -0,0 +1,117 @@
+# CNumerical 数值显示
+
+## 功能说明
+
+用于以美观的方式展示一组数值及其标题的组件，支持小数点分隔显示，可以自适应不同数量的数值项，并支持点击事件。
+
+## 引用方式
+
+```js
+import CNumerical from '@components/layout/numerical';
+```
+
+## 组件参数
+
+- `values` (Array，必选)：数值集合，数组中的每项为对象，包含以下属性：
+ - `title` (String)：数值项的标题
+ - `value` (Number|String)：要显示的数值
+ - `textType` (String，可选)：文本颜色类型，对应 CSS 类 'm-text-{textType}'
+ - `onClick` (Function，可选)：点击数值项时的回调函数，接收当前项对象作为参数
+
+## 使用示例
+
+### 基础用法
+
+```html
+<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>
+```
+
+### 带颜色样式和点击事件
+
+```html
+<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个项目时，占满整行
+2. 数值会自动分离整数和小数部分，整数部分字体较大，小数部分字体较小
+3. 当整数部分超过4位数时，小数部分的字体会进一步缩小
+4. 具有onClick属性的项目会显示一个向右的箭头，并增加点击样式
+5. textType属性可以控制数值的颜色，通过添加类名 'm-text-{textType}' 实现
+
+<!-- 作者：Tevin -->
\ No newline at end of file
--
Gitblit v1.9.1