# Card 卡片

概述

Card 卡片,常用的布局组件。

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 钉钉小程序 百度小程序 字节小程序 QQ小程序 H5/PC

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiCard from "@/components/firstui/fui-card/fui-card.vue"
export default {
	components:{
		fuiCard
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 src 属性设置头像,图标图片地址,title 属性设置标题,tag 属性设置额外信息,如:时间等。

<fui-card :src="src" title="标题文字" tag="额外信息">
	<view class="fui-card__content">这是一个基础卡片的示例,此处为自定义内容区域,自行控制内容样式。</view>
</fui-card>
1
2
3
通栏展示

通过 full 属性设置是否通栏,为true时margin-left,margin-right失效。

<fui-card :padding="['20rpx','32rpx']" full :src="src" title="标题文字" tag="额外信息">
	<view class="fui-card__content fui-padding">这是一个基础卡片的示例,此处为自定义内容区域,自行控制内容样式。</view>
</fui-card>
1
2
3

# Slots

插槽名称 说明
default Card主内容部分
footer Card底部显示内容

# Props

属性名 类型 说明 默认值 平台差异说明
margin Array margin值:[上,右,下,左] ['0', '32rpx'] -
full Boolean 是否通栏,为true时margin-left,margin-right失效 false -
background String 背景色 #fff -
radius String 圆角值 16rpx 非nvue下showBorder为false时生效
shadow String 阴影,showBorder为false时有效 0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05) nvue下,android无效
elevation String 阴影,showBorder为false时有效 5px 仅android且nvue下有效,box-shadow失效
showBorder Boolean 是否显示边框,为true时box-shadow和elevation失效 false -
borderColor String 边框颜色 #EEEEEE 仅nvue下生效,非nvue端通过css变量(--fui-color-border)修改
headerBackground String header部分背景色 #fff -
headerLine Boolean 是否需要header底部线条 true -
footerLine V1.7.0+ Boolean 是否需要内容与footer之间线条 false -
lineColor String header 底部线条颜色 #EEEEEE 仅nvue有效,非nvue端通过css变量(--fui-color-border)修改
padding Array header padding值:[上,右,下,左] ['20rpx', '20rpx'] -
src String 头像,图标图片地址 - -
width Number, String 图片宽度,单位rpx 64 -
height Number, String 图片高度,单位rpx 64 -
imageRadius String 图片圆角 8rpx -
title String 标题 - -
size Number, String 标题字体大小,单位rpx 30 -
color String 标题字体颜色 #7F7F7F -
tag String 标签,额外信息 - -
tagSize Number, String 标签字体大小,单位rpx 24 -
tagColor String 标签字体颜色 #b2b2b2 -
index Number 索引 0 -

# Events

事件名 说明 回调参数
@click 点击Card时触发 {
  index:索引
}

示例预览

# 示例代码地址

FirstUICard 卡片
Last Updated: 9/29/2022, 1:07:59 AM