Card 卡片

Card 卡片:根据需要设置内容,可设置是否通栏。

组件结构

<template>
	<view class="tui-card-class tui-card" :class="[full?'tui-card-full':'',border?'tui-card-border':'']" @tap="handleClick"
	 @longtap="longTap">
		<view class="tui-card-header" :class="{'tui-header-line':header.line}" :style="{background:header.bgcolor || '#fff'}">
			<view class="tui-header-left">
				<image :src="image.url" class="tui-header-thumb" :class="{'tui-thumb-circle':image.circle}" mode="widthFix" v-if="image.url"
				 :style="{height:(image.height || 60)+'rpx',width:(image.width || 60)+'rpx'}"></image>
				<text class="tui-header-title" :style="{fontSize:(title.size || 30)+'rpx',color:(title.color || '#7A7A7A')}" v-if="title.text">{{title.text}}</text>
			</view>
			<view class="tui-header-right" :style="{fontSize:(tag.size || 24)+'rpx',color:(tag.color || '#b2b2b2')}" v-if="tag.text">
				{{tag.text}}
			</view>
		</view>
		<view class="tui-card-body">
			<slot name="body"></slot>
		</view>
		<view class="tui-card-footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiCard",
		props: {
			//是否铺满
			full: {
				type: Boolean,
				default: false
			},
			image: {
				type: Object,
				default: function() {
					return {
						url: "", //图片地址
						height: 60, //图片高度
						width: 60, //图片宽度
						circle: false
					}
				}
			},
			//标题
			title: {
				type: Object,
				default: function() {
					return {
						text: "", //标题文字
						size: 30, //字体大小
						color: "#7A7A7A" //字体颜色
					}
				}
			},
			//标签,时间等
			tag: {
				type: Object,
				default: function() {
					return {
						text: "", //标签文字
						size: 24, //字体大小
						color: "#b2b2b2" //字体颜色
					}
				}
			},
			header: {
				type: Object,
				default: function() {
					return {
						bgcolor: "#fff", //背景颜色
						line: false //是否去掉底部线条
					}
				}
			},
			//是否设置外边框
			border: {
				type: Boolean,
				default: false
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			},
			longTap() {
				this.$emit('longclick', {
					index: this.index
				});
			}
		}
	}
</script>

组件样式

... 此处省略n行

脚本说明

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

methods

名称 描述
@click 点击事件
@longclick 长按事件

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/card/card

H5二维码

小程序二维码