ThorUI文档

# 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。

默认卡片

传入 image 、title 、tag 等属性值即可。

<!--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图片设置，字体设置

传入 image 、title 、tag 等属性值即可，看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示例小程序码

← tui-grid 宫格 →