uniapp组件-Card卡片

官方组件：https://ext.dcloud.net.cn/plugin?id=22 

效果1：

<template>
	<view>
		<uni-card>
				标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现
		</uni-card>
		<uni-card :isShadow="true" @click="clickCard">
				标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现
		</uni-card>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		clickCard() {
			uni.showToast({
				title: '点击卡片',
				icon: 'none'
			});
		}
	}
};
</script>

<style></style>

效果2：

<template>
	<view>
		<uni-card :isShadow="true" title="标题内容" subTitle="副标题" mode="basic" extra="技术没有上限" @click="clickCard">
			<view>
				<view style="height: 350rpx;">
					<image style="width: 100%;" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg" />
				</view>
				<view class="content-box"><text style="font-size: 12px;">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text></view>
			</view>
		</uni-card>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		clickCard() {
			uni.showToast({
				title: '点击卡片',
				icon: 'none'
			});
		},
		footerClick(types) {
			uni.showToast({
				title: types,
				icon: 'none'
			});
		}
	}
};
</script>

<style></style>

效果3：

<template>
	<view>
		<uni-card
			:isShadow="true"
			title="标题内容"
			subTitle="副标题"
			mode="basic"
			thumbnail="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
			extra="技术没有上限"
			note="slot卡槽默认内容"
			@click="clickCard"
		>
			<view>
				<view style="height: 350rpx;">
					<image style="width: 100%;" mode="aspectFill" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg" />
				</view>
				<view class="content-box"><text style="font-size: 12px;">标题卡片带有一个双标题头部，右侧为额外描述信息 ，内容可自定义实现</text></view>
			</view>
			<template slot="footer">
				<view class="footer-box">
					<view @click.stop="footerClick('喜欢')"><text class="footer-box__item">喜欢</text></view>
					<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text></view>
					<view @click.stop="footerClick('分享')"><text class="footer-box__item">分享</text></view>
				</view>
			</template>
		</uni-card>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {};
	},
	methods: {
		clickCard() {
			uni.showToast({
				title: '点击卡片',
				icon: 'none'
			});
		},
		footerClick(types) {
			uni.showToast({
				title: types,
				icon: 'none'
			});
		}
	}
};
</script>

<style>
.footer-box {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

.footer-box__item {
	font-size: 12px;
	color: #666;
}
</style>