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/description.doc/CDescription.doc.md | 149 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 149 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/description.doc/CDescription.doc.md b/_cursor.ai/layout.doc/description.doc/CDescription.doc.md
new file mode 100644
index 0000000..8a62006
--- /dev/null
+++ b/_cursor.ai/layout.doc/description.doc/CDescription.doc.md
@@ -0,0 +1,149 @@
+# CDescription 描述列表项
+
+## 功能说明
+
+描述列表项组件，用于展示标签和内容的键值对形式信息，常用于详情页面的信息展示，支持不同的标签对齐方式和样式选项。
+
+## 引用方式
+
+```js
+import CDescription from '@components/layout/description';
+```
+
+## 组件参数
+
+- `label` (String，必选)：左侧标签文本
+- `labelAlign` (String，可选)：标签对齐方式，默认值为 'left'
+ - `left`：定宽左对齐
+ - `right`：定宽右对齐
+ - `none`：无固定宽度
+- `enlarged` (Boolean，可选)：是否加大显示区域，默认值为 false
+- `hasBorder` (Boolean，可选)：是否显示底部边框，默认值为 false
+
+## 使用示例
+
+### 基础用法
+
+```html
+<template>
+ <view class="page">
+ <CDescription label="名称">
+ <text>张三</text>
+ </CDescription>
+ <CDescription label="电话">
+ <text>13800138000</text>
+ </CDescription>
+ <CDescription label="地址">
+ <text>广州市天河区某某路某某号</text>
+ </CDescription>
+ </view>
+</template>
+
+<script>
+import CDescription from '@components/layout/description';
+
+export default {
+ components: {
+ CDescription
+ }
+}
+</script>
+```
+
+### 不同对齐方式和样式
+
+```html
+<template>
+ <view class="page">
+ <!-- 标签右对齐 -->
+ <CDescription
+ label="订单编号"
+ labelAlign="right"
+ >
+ <text>OR202304250001</text>
+ </CDescription>
+
+ <!-- 带底部边框 -->
+ <CDescription
+ label="金额"
+ hasBorder
+ >
+ <text class="m-text-primary">¥198.00</text>
+ </CDescription>
+
+ <!-- 加大显示区域 -->
+ <CDescription
+ label="备注"
+ enlarged
+ >
+ <text>此订单为加急订单，请优先处理，并且联系物流安排配送</text>
+ </CDescription>
+
+ <!-- 无宽度限制的标签 -->
+ <CDescription
+ label="客户提供的自定义信息要求"
+ labelAlign="none"
+ >
+ <text>产品需要绿色包装</text>
+ </CDescription>
+ </view>
+</template>
+
+<script>
+import CDescription from '@components/layout/description';
+
+export default {
+ components: {
+ CDescription
+ }
+}
+</script>
+```
+
+### 在卡片内使用
+
+```html
+<template>
+ <view class="page">
+ <CCard>
+ <CCardTitle title="订单信息" />
+ <CCardContent>
+ <CDescription label="订单编号">
+ <text>OR202304250001</text>
+ </CDescription>
+ <CDescription label="下单时间">
+ <text>2023-04-25 14:30:25</text>
+ </CDescription>
+ <CDescription label="订单状态">
+ <text class="m-text-warning">待处理</text>
+ </CDescription>
+ </CCardContent>
+ </CCard>
+ </view>
+</template>
+
+<script>
+import CDescription from '@components/layout/description';
+import { CCard, CCardTitle, CCardContent } from '@components/layout/card';
+
+export default {
+ components: {
+ CDescription,
+ CCard,
+ CCardTitle,
+ CCardContent
+ }
+}
+</script>
+```
+
+## 注意事项
+
+1. 组件主要用于键值对形式的信息展示，内容部分通过默认插槽提供
+2. 标签宽度在labelAlign为left和right时是固定的，建议标签文字不要过长
+3. 当标签文字较长时，可以使用labelAlign="none"取消固定宽度限制
+4. 内容部分可以插入任何元素，不仅限于文本
+5. 组件适合连续使用来展示多个信息项，形成一个完整的描述列表
+6. 当设置hasBorder为true时，会在项目底部显示一条分隔线
+
+<!-- 作者：Tevin -->
\ No newline at end of file
--
Gitblit v1.9.1