• 引入
  • 代码演示
    • 基本
  • API
    • CellItem Props

    DetailItem 清单项

    Scan me!

    清单列表用于展示一些列表信息,如账单。

    引入

    1. import { DetailItem } from 'mand-mobile'
    2. Vue.component(DetailItem.name, DetailItem)

    代码演示

    基本

    DetailItem 清单项 - 图2

    1. <template>
    2. <div class="md-example-child md-example-child-detail-item md-example-child-detail-item-0">
    3. <md-field>
    4. <md-detail-item title="承保公司" content="众安" bold />
    5. <md-detail-item title="投保人" content="张三" />
    6. <md-detail-item title="被保人" content="李四" />
    7. <md-detail-item title="保险费用" content="0.1元/日" />
    8. <md-detail-item title="保障日期" content="2018/08/08 ~ 2019/08/08" />
    9. <md-detail-item title="保单号" content="123456789" />
    10. <md-detail-item title="保单协议">
    11. <a href="#" style="color:#5878B4;text-decoration:none;">查看</a>
    12. </md-detail-item>
    13. </md-field>
    14. </div>
    15. </template>
    16. <script>
    17. import {Field, DetailItem} from 'mand-mobile'
    18. export default {
    19. name: 'detail-item-demo',
    20. components: {
    21. [Field.name]: Field,
    22. [DetailItem.name]: DetailItem,
    23. },
    24. }
    25. </script>
    26.  

    API

    CellItem Props

    属性说明类型默认值备注
    title标题String--
    content描述内容String--
    bold是否加粗显示Booleanfalse-