Ant Design Vue笔记——卡片Card

1. 卡片标题上添加图标

给卡片里面元素身上加slot属性，值等于title，需要取消组件a-card的title属性，不然无效。

<a-card>
   <div slot="title"><a-icon type="smile" />卡片标题</div>
   <p>卡片内容</p>
</a-card>

2.修改卡片标题样式

给<a-card>添加自定义标题区域样式headStyle

<a-card  class='middle' :head-style='hstyle'></a-card>

<script>

export default {
 data() {
    return {
      hstyle:{"font-size": "18px","color":"#666"}
    }
  }
}

</script>

 

3.去除卡片内容区域默认内边距 

去除内容区内边距方法: 添加内容区域自定义样式 bodyStyle，将padding值设为0

<a-card :body-style='{padding:0}'>

</a-card>