小程序中slot插槽使用默认值方案

前提：
在很多场景下我们希望自定义组件有较好的扩展性，在不传入slot的情况下默认展示默认的结构与样式，但小程序中的slot没有像vue中的slot一样提供默认值，这时候我们可以通过伪类选择器:empty 和 相邻选择器+控制元素的display来实现

• 使用自定义组件

<view>
  <slot-item>
    <button>我是一个按钮</button>
  </slot-item>
  <slot-item></slot-item>
  <slot-item>
    <text style="color: red;">我是一个文本</text>
  </slot-item>
</view>

• 实现自定义组件
  • wxml

<view class="container">
  <view>我是header</view>
  <view class="content">
    <slot></slot>
  </view>
  <!-- 插槽默认值 -->
  <view class="default">我是slot默认值</view>
  <view>我是footer</view>
</view>

• wxss

.default {
  width: 200rpx;
  height: 200rpx;
  background-color: #f99;
  text-align: center;
  line-height: 200rpx;
  margin: 0 auto;
  /* 默认值默认不显示 */
  display: none;
}

/* 当插槽内为空时 通过相邻选择器将默认值显示 */
.content:empty+.default {
  display: block;
}