微信小程序用CSS实现简易插槽

基于CSS实现 废话少说 直接上代码

组件代码结构

wxml代码

<!-- area-header组件  -->
<view class="header">
  <view class="title">{{title}}</view>
  <view class="right" wx:if="{{showRight}}">
    <!-- 插槽  -->
    <view class="slot">
      <slot></slot>
    </view>
     <!-- 默认内容  -->
    <view class="default">
      <text>更多</text>
      <image class="icon" src="/assets/images/icons/arrow-right.png"></image>
    </view>
  </view>
</view>

wxss代码

.header .slot:empty + .default {
  display: flex;
}

.header .default {
  display: none;
}

效果

如果组件内为空就会显示默认值

<!-- 使用  -->
<area-header title="推荐歌曲">
</area-header>

未使用插槽效果：

如果组件内传插槽就隐藏默认值

<area-header title="推荐歌曲">
    <text>我是slot</text>
 </area-header>

使用插槽效果：