【首页】文字封装开发

一、【首页】文字封装开发

1.1 在components/common目录中创建了Card.vue组件文件

1.2 在pages/index/index.vue中引入Card组件

1.3 Card组件是卡片完成效果为复用的文字

1.4 完成效果为：

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

1.6完成卡片复用主要代码

1.7在pagas/index中调用卡片代码

<template>
	<view class="index">
		<indexswiper></indexswiper>
		<recommend></recommend>
		<card cardtitle='猜你喜欢'></card>
		<card cardtitle='商品店铺'></card>
		<card cardtitle='运动户外'></card>
		<card cardtitle='运动交友'></card>
	</view>
</template>

<script>
	import indexswiper from '@/components/index/indexswiper.vue'
	import recommend from '@/components/index/recommend.vue'
	import card from '@/components/common/card.vue'
	export default {
		data() {
			return {
				
			}
    	},
		components:{
			indexswiper,
			recommend,
			card
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>

</style>