Card 卡片

在卡片中展示内容。

基础用法

包含基本标题，内容和操作。

卡片标题

内容展示 1

内容展示 2

内容展示 3

内容展示 4

通过 template标签，指定header插槽以此展示卡片标题，它是可选的。

<template>
  <mist-card class="demo-card">
    <template v-slot:header>
      <span>卡片标题</span>
      <mist-button type="primary" size="mini" class="demo-btn">按钮</mist-button>
    </template>
    <div v-for="num in 4" :key="num" style="font-size: 14px; margin-bottom: 18px">
      {{ "内容展示 " + num }}
    </div>
  </mist-card>
</template>
<style>
  /* .demo-card{
    width: 480px;
  } */
  .demo-btn{
    float: right;
  }
</style>

Expand Copy Copy

简单卡片

只包含内容。

内容展示 1

内容展示 2

内容展示 3

内容展示 4

<template>
  <mist-card class="demo-card2">
    <div v-for="num in 4" :key="num" style="font-size: 14px; margin-bottom: 18px">
      {{ "内容展示 " + num }}
    </div>
  </mist-card>
</template>
<style>
  /* .demo-card2{
    width: 480px;
  } */
</style>

Expand Copy Copy

自定义内容

可以包含丰富的内容展示。

自定义内容

卡片自定义内容,卡片自定义内容,卡片自定义内容

配置 body-style 属性来自定义 body 部分的 style ，body-style 接收一个对象。

<template>
  <mist-card :body-style="{ 'font-size': '18px', 'background-color': '#eee' }">
    <span>自定义内容</span>
    <div style="font-size: 14px;">卡片自定义内容,卡片自定义内容,卡片自定义内容</div>
  </mist-card>
</template>

Expand Copy Copy