CDescription 描述列表项

功能说明

描述列表项组件，用于展示标签和内容的键值对形式信息，常用于详情页面的信息展示，支持不同的标签对齐方式和样式选项。

引用方式

import CDescription from '@components/layout/description';

组件参数

• label (String，必选)：左侧标签文本
• labelAlign (String，可选)：标签对齐方式，默认值为 'left'
• left：定宽左对齐
• right：定宽右对齐
• none：无固定宽度
• enlarged (Boolean，可选)：是否加大显示区域，默认值为 false
• hasBorder (Boolean，可选)：是否显示底部边框，默认值为 false

使用示例

基础用法

<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>

不同对齐方式和样式

<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>

在卡片内使用

<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时，会在项目底部显示一条分隔线