【uniapp】uniapp具名插槽的使用
uniapp具名插槽的使用
·
子组件定义插槽:
<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>
更多推荐
已为社区贡献3条内容
所有评论(0)