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

// data 数据 及 方法
export default {
 data() {
 	return {
 		card: {
 			img: {
 				url: '/static/images/news/avatar_1.jpg'
 			},
 			title: {
 				text: 'CSDN云计算'
 			},
 			tag: {
 				text: '1小时前'
 			},
 			header: {
 				bgcolor: '#F7F7F7',
 				line: true
 			}
 		}
 	}
 }
}

.tui-default {
	padding: 20rpx 30rpx;
}

<!--微信小程序-->
<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 数据 及 方法
Page({
data: {
  card: {
 	 img: {
 		 url: '/static/images/news/avatar_1.jpg'
 	 },
 	 title: {
 		text: 'CSDN云计算'
 	 },
 	 tag: {
 	 	text: '1小时前'
 	 },
 	 header: {
 		bgcolor: '#F7F7F7',
 		line: true
 	 }
   }
 }
})

.tui-default {
	padding: 20rpx 30rpx;
}

// Make sure to add code blocks to your code group

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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		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
 			}
 		}
 	}
 },
 methods: {
 	change: function(e) {
 		this.value = e.value
 	}
 }
}

.tui-default {
	padding: 20rpx 30rpx;
}

<!--微信小程序-->
<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 数据 及 方法
Page({
  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
    	}
    }
  },
  change: function (e) {
      this.setData({
        value:e.detail.value
      })
  }
})

.tui-default {
	padding: 20rpx 30rpx;
}

// Make sure to add code blocks to your code group

通栏

通过 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>

// data 数据 与 css 同上

# Slots

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

# Props

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

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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