vxGidcFundDetailCard

基金产品简介

引用

import vxGidcFundDetailCard from '@/components/vx-gidc-fund-detail-card';

Vue.component(vxGidcFundDetailCard.name, vxGidcFundDetailCard);

使用指南

主要展示基金产品的基础信息，可以灵活配置

代码演⽰

<vx-gidc-fund-detail-card content-size="5" :title="fundTitle" :content="fundContent" class="fund-card">
  <div>
    <p>
      <img src="@/assets/image/investment-manage/tag.png" alt="基金状态" />
      <span>开放期</span>
    </p>
  </div>

  <div slot="button">
    <ui-button type="primary" round @click="toBuy">立即购买</ui-button>
  </div>
</vx-gidc-fund-detail-card>

API

vxGidcFundDetailCard Props

属性	说明	类型	默认值	备注
content-size	每行条数	Number/String	5	非必传，如果content属性的length长度大于此属性值，详情内容将自动换行
title	卡片标题信息	`[String, String]`	-	数组第零项字体字体会自动加粗，每两个中间下划线相连
content	详情数据内容	`[{value: String,label: String,color: String}]`	-	value为展示的内容， label为标题， color用于设置value的字体颜色(可选参数)

vxGidcFundDetailCard Slots

default

title的右侧部分的内容在卡片第一行展示

button

卡片头部浮动靠右侧显示，展示功能按钮

Current Tags

0.0.7 ... latest (2 years ago)

1 Versions

0.0.7 ... 2 years ago