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>

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐