css花招|通过伪类选择器来实现小程序插槽默认值

主页面

<area-header title="推荐歌曲">牛逼了家人们</area-header>

组件

<view class="header">
    <view class="slot"><slot></slot></view>
    <view class="default">
      <text>{{rightText}}</text>
      <image class="icon" src="/pages/icon/more.png"></image>
</view>

CSS

当slot里面没有值的时候，用+ 兄弟元素选择器选中default给它display flex就可以，其实display block 也可以，但是因为我这边里面有布局，所以用的flex

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

有值

 没有值的时候就这样

 小程序不支持slot默认值是我十分费解的事情