Card 卡片

使用指南

用于组织信息和操作，也作为详细信息的入口， 卡片容器分为两个类型：矩形卡片、通栏卡片。

代码演示

查看代码

<template>
  <div class="list">
    <p>矩形卡片</p>
    <h3-card
      class="normal-card"
      title="标题"
      titleLabel="二级信息"
    >
      <template #default>
        <div>自定义内容</div>
      </template>
      <template #footer>
        <span>二级信息/操作按钮</span>
        <span>二级信息/操作按钮</span>
      </template>
    </h3-card>

    <p>通栏卡片</p>

    <h3-card
      class="full-card"
      :full="true"
      title="标题"
      titleLabel="二级信息"
      :thumb="avatar"
    >
      <template #default>
        <div>自定义内容</div>
      </template>
      <template #footer>
        <span>二级信息/操作按钮</span>
        <span>二级信息/操作按钮</span>
      </template>
    </h3-card>

  </div>
</template>

<script>
import H3Card from '@/components/h3-card';

export default {
  name: 'Card',
  components: {
    H3Card,
  },
  data () {
    return {
      avatar:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg',
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 16px;
  }
  .normal-card {
    margin: 0 10px;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop

属性	说明	类型	默认值
full	是否通栏	boolean	false
thumb	标题图片URL	string	-
title	标题	string	-
titleLabel	标题右侧二级信息描述	string	-

Slots

参数	说明
default	卡片内容插槽
title	卡片标题插槽
titleExtra	卡片标题右侧区域插槽
footer	卡片底部插槽