- 引入
- 代码演示
- 基本
- API
- CellItem Props
- CellItem Props
DetailItem 清单项
清单列表用于展示一些列表信息,如账单。
引入
import { DetailItem } from 'mand-mobile'
Vue.component(DetailItem.name, DetailItem)
代码演示
基本
<template>
<div class="md-example-child md-example-child-detail-item md-example-child-detail-item-0">
<md-field>
<md-detail-item title="承保公司" content="众安" bold />
<md-detail-item title="投保人" content="张三" />
<md-detail-item title="被保人" content="李四" />
<md-detail-item title="保险费用" content="0.1元/日" />
<md-detail-item title="保障日期" content="2018/08/08 ~ 2019/08/08" />
<md-detail-item title="保单号" content="123456789" />
<md-detail-item title="保单协议">
<a href="#" style="color:#5878B4;text-decoration:none;">查看</a>
</md-detail-item>
</md-field>
</div>
</template>
<script>
import {Field, DetailItem} from 'mand-mobile'
export default {
name: 'detail-item-demo',
components: {
[Field.name]: Field,
[DetailItem.name]: DetailItem,
},
}
</script>
API
CellItem Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
title | 标题 | String | - | - |
content | 描述内容 | String | - | - |
bold | 是否加粗显示 | Boolean | false | - |