# tui-card 卡片

介绍

可自定义宽高,设置字体大小,阴影,圆角,镂空等,支持表单提交。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiCard from "@/components/thorui/tui-card/tui-card.vue"
export default {
	components:{
		tuiCard
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-card": "/components/thorui/tui-card/tui-card"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

默认卡片

传入 imagetitletag 等属性值即可。

<!--uni-app-->
<tui-card :image="card.img" :title="card.title" :tag="card.tag">
	<template v-slot:body>
		<view class="tui-default">
			默认卡片内容部分 slot=>body
		</view>
	</template>
	<template v-slot:footer>
		<view class="tui-default">
			默认卡片底部 slot=>footer
		</view>
	</template>
</tui-card>

<!--微信小程序-->
 <tui-card image="{{card.img}}" title="{{card.title}}" tag="{{card.tag}}">
    <view class="tui-default" slot="body">
      默认卡片内容部分 slot=>body
    </view>
    <view slot="footer" class="tui-default">
      默认卡片底部 slot=>footer
    </view>
 </tui-card>
//data 数据
card: {
	img: {
		url: '/static/images/news/avatar_1.jpg'
	},
	title: {
		text: 'CSDN云计算'
	},
	tag: {
		text: '1小时前'
	},
	header: {
		bgcolor: '#F7F7F7',
		line: true
	}
}
header图片设置,字体设置

传入 imagetitletag 等属性值即可,看data数据的变化。

<!--uni-app-->
<tui-card :image="card.img" :title="card.title" :tag="card.tag">
	<template v-slot:body>
		<view class="tui-default">
			卡片内容部分 slot=>body
		</view>
	</template>
	<template v-slot:footer>
		<view class="tui-default">
			卡片底部 slot=>footer
		</view>
	</template>
</tui-card>

<!--微信小程序-->
 <tui-card image="{{card.img}}" title="{{card.title}}" tag="{{card.tag}}">
     <view slot="body">
       <view class="tui-default">
         卡片内容部分 slot=>body
       </view>
     </view>
     <view slot="footer">
       <view class="tui-default">
         卡片底部 slot=>footer
       </view>
     </view>
 </tui-card>
//data 数据
card: {
	img: {
		url: '/static/images/news/avatar_2.jpg',
		width: 80,
		height: 80,
		circle: true
	},
	title: {
		text: 'CSDN云计算',
		color: '#ed3f14',
		size: 34
	},
	tag: {
		text: '1小时前',
		color: '#ed3f14',
		size: 28
	}
}
通栏

通过 full 属性设置卡片是否通栏,默认值为 false。

<!--uni-app-->
<tui-card :image="card.img" :title="card.title" :tag="card.tag" full>
	<template v-slot:body>
		<view class="tui-default">
			卡片内容部分 slot=>body
		</view>
	</template>
	<template v-slot:footer>
		<view class="tui-default">
			卡片底部 slot=>footer
		</view>
	</template>
</tui-card>

<!--微信小程序-->
 <tui-card image="{{card.img}}" title="{{card.title}}" tag="{{card.tag}}" full>
     <view slot="body">
       <view class="tui-default">
         卡片内容部分 slot=>body
       </view>
     </view>
     <view slot="footer">
       <view class="tui-default">
         卡片底部 slot=>footer
       </view>
     </view>
 </tui-card>

# Slots

名称 说明
body 卡片主内容部分
footer 卡片底部显示内容

# Props

参数 类型 说明 默认值
full Boolean 是否铺满宽度 false
image Object 图片,头像等 {
  url: "", //图片地址
  height: 60, //图片高度
  width: 60, //图片宽度
  circle: false //是否圆角
}
title Object 标题 {
  text: "", //标题文字
  size: 30, //字体大小
  color: "#7A7A7A" //字体颜色
}
tag Object 标签,时间等 {
  text: "", //标签文字
  size: 24, //字体大小
  color: "#b2b2b2" //字体颜色
}
header Object 头部样式 {
  bgcolor: "#fff", //背景颜色
  line: false //是否去掉底部线条
}
border Boolean 是否设置外边框 false
index Number 卡片索引 0

# Events

事件名 说明 回调参数
click 点击事件,绑定事件后点击卡片可触发 {index: Number}
longclick 长按事件,绑定事件后长按卡片可触发 {index: Number}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码