子组件定义插槽:

<template>
	<view class="show">
		<view class="sign">
			<view class="iconfont iconfont1"><slot name="pic"></slot></view>
		</view> 
		<view class="tips">
			<p class="tips1"><slot name="t1"></slot></p>
			<p class="tips1"><slot name="t2"></slot></p>
			<p class="tips1"><slot name="t3"></slot></p>
		</view>
		<view class="bottom">
			<view class="img1">
				<view class="iconfont iconfont2"><slot name="b1"></slot></view>
				<view class="typeface"><slot name="b2"></slot></view>	
			</view>
			<view class="img2">
				<view class="iconfont iconfont3"><slot name="b3"></slot></view>
				<view class="typeface"><slot name="b4"></slot></view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
.show{
	width: 750rpx;
	height: 917rpx;
	border-bottom: 10rpx solid rgba(0, 0, 0, 0.1);
	position: absolute;
}
.show .sign{
	width: 500rpx;
	height: 500rpx;
	display: flex;
	border-radius: 50%;
	position: relative;
	top: 60rpx;
	left: 125rpx;
	background-color: #ffffff;
	box-shadow: 0px 0px 20px 0px 
	rgba(0, 0, 0, 0.15);
	margin-bottom: 120rpx;
}
.iconfont1{
	font-size: 380rpx;
	color: #2bb4ed;
	position: absolute;
	left:50%;
	transform:translate(-50%,0);
	align-self: center;
}
.tips{
	width: 225rpx;
	height: 113rpx;
	margin: 0 auto;
}
.tips .tips1{
	font-family: 'PingFang-SC-Bold';
	font-weight: bolder;
	font-size: 28rpx;
	line-height: 48rpx;
	color: #333333;
	text-align: center;
}
.bottom{
	height: 50rpx;
	width: 750rpx;
	display: flex;
	padding-top: 80rpx;
}
.bottom .img1{
	padding-left: 126rpx;
	display: flex;
	align-items: center;
}
.bottom  .typeface{
	line-height: 50rpx;
	font-family: 'PingFang-SC-Medium';
	font-size: 28rpx;
	font-weight: bold;
	color: #000000;
}
.bottom .img1 .iconfont2{
	font-size: 60rpx;
	color: #e5491f;
	padding-right: 10rpx;
}
.bottom .img2{
	padding-left: 226rpx;
	display: flex;
	align-items: center;
}
.bottom .img2 .iconfont3{
	font-size: 60rpx;
	color: #2bb4ed;
	padding-right: 10rpx;
}
</style>

父组件使用插槽:

<template>
	<view class="show">
		<view class="sign">
			<view class="iconfont iconfont1"><slot name="pic"></slot></view>
		</view> 
		<view class="tips">
			<p class="tips1"><slot name="t1"></slot></p>
			<p class="tips1"><slot name="t2"></slot></p>
			<p class="tips1"><slot name="t3"></slot></p>
		</view>
		<view class="bottom">
			<view class="img1">
				<view class="iconfont iconfont2"><slot name="b1"></slot></view>
				<view class="typeface"><slot name="b2"></slot></view>	
			</view>
			<view class="img2">
				<view class="iconfont iconfont3"><slot name="b3"></slot></view>
				<view class="typeface"><slot name="b4"></slot></view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
.show{
	width: 750rpx;
	height: 917rpx;
	border-bottom: 10rpx solid rgba(0, 0, 0, 0.1);
	position: absolute;
}
.show .sign{
	width: 500rpx;
	height: 500rpx;
	display: flex;
	border-radius: 50%;
	position: relative;
	top: 60rpx;
	left: 125rpx;
	background-color: #ffffff;
	box-shadow: 0px 0px 20px 0px 
	rgba(0, 0, 0, 0.15);
	margin-bottom: 120rpx;
}
.iconfont1{
	font-size: 380rpx;
	color: #2bb4ed;
	position: absolute;
	left:50%;
	transform:translate(-50%,0);
	align-self: center;
}
.tips{
	width: 225rpx;
	height: 113rpx;
	margin: 0 auto;
}
.tips .tips1{
	font-family: 'PingFang-SC-Bold';
	font-weight: bolder;
	font-size: 28rpx;
	line-height: 48rpx;
	color: #333333;
	text-align: center;
}
.bottom{
	height: 50rpx;
	width: 750rpx;
	display: flex;
	padding-top: 80rpx;
}
.bottom .img1{
	padding-left: 126rpx;
	display: flex;
	align-items: center;
}
.bottom  .typeface{
	line-height: 50rpx;
	font-family: 'PingFang-SC-Medium';
	font-size: 28rpx;
	font-weight: bold;
	color: #000000;
}
.bottom .img1 .iconfont2{
	font-size: 60rpx;
	color: #e5491f;
	padding-right: 10rpx;
}
.bottom .img2{
	padding-left: 226rpx;
	display: flex;
	align-items: center;
}
.bottom .img2 .iconfont3{
	font-size: 60rpx;
	color: #2bb4ed;
	padding-right: 10rpx;
}
</style>

 定义:<p class="tips1"><slot name="t1"></slot></p>

 使用:<view :slot="'t1'">自动运行</view>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐