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

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

• 使用自定义组件

  
    我是一个按钮
  
  
  
    我是一个文本
  

• 实现自定义组件
  • wxml

  我是header
  
    
  
  
  我是slot默认值
  我是footer

• 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;
}