06 首页文字封装

最新推荐文章于 2024-09-25 16:55:21 发布

Dreamer_gwh

最新推荐文章于 2024-09-25 16:55:21 发布

阅读量65

点赞数

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45529137/article/details/126673840

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 完成效果

在这里插入图片描述

2. 代码

在components/common目录中创建了Card.vue组件文件
在pages/index/index.vue中引入Card组件
Card组件是卡片完成效果为复用的文字
Card组件完成代码为：

<template>
	<view class='card'>
		<view>-</view>
		<slot>
			<view class='card-name'>{{cardTitle}}</view>
		</slot>
		<view>-</view>
	</view>
</template>

<script>
export default {
	props:{
		cardTitle:String
	}
}
</script>

<style scoped>
.card{
	padding:20rpx 0;
	display: flex;
	justify-content: center;
	font-weight: bold;
}
.card-name{
	padding:0 20rpx;
	font-size:32rpx;
}
</style>