有关插槽-想给插槽增加默认值的优雅解决方式
在使用小程序组件的slot插槽的时候,我们发现这个插槽是不能给默认值的。并不像vue和react那么好用。原因是我们不能给插槽提供默认值,在使用组件的时候传值就不显示默认值。
最简单的方式当然是使用一个布尔类型的变量,通过wx:if
和wx:else
来控制是显示插槽的值,还是显示组件内部的默认值。
很明显,这个方式不优雅,不是我们大多数人所希望的。
事实上,还是有一种方式可以优雅的解决这个问题。需要利用css的一些特性。
我们可以使用一个empty
伪类来解决。
<view class="header">
<!-- 标题 -->
<view class="title">{{title}}</view>
<view class="slot">
<slot></slot>
</view>
<!-- 插槽不传递值的时候,则作为默认值显示 默认情况下 我们不让其显示 -->
<view class="right">
<text class="right-title">{{rightText}}</text>
<!-- 图标 -->
<image class="icon" src="../common/images/icon/arrow-right.png"/>
</view>
</view>
样式采用的是less进行书写
/* components/area-header/index.wxss */
.header {
height: 80rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
color: #000;
font-weight: bold;
font-size: 34rpx;
}
// 默认插槽是否显示 如果默认插槽组件内是空的,也就是没有传组件,此时<slot/>
// 标签在渲染的时候,会消失,则slot标签的父容器此时为空
.slot:empty + .right {
// 插槽是空 则显示默认插槽
display: block;
}
.right {
// 默认情况 我们认为插槽会传值 则不显示
display: none;
.right-title {
font-size: 28rpx;
color: #bbb;
line-height: 80rpx;
text-align: center;
}
.icon {
// 图片 文字对齐方式
vertical-align: middle;
height: 48rpx;
width: 48rpx;
}
}
}
如果我们没有给插槽传值,则会显示下面类名为right
的标签:
如果我们在使用组件的时候,给插槽传值了,则会显示我们传入的值:
可以解决多使用变量,在给插槽传值的时候,还需要使用变量控制默认标签是否显示的问题。