小程序实现插槽默认值

小程序实现插槽默认值

在小程序中是没有插槽默认值的 我们需要通css选择器来实现看效果

插槽组件的内容及其结构

<view class="wrapper">
  <view class="header">
    <slot></slot>
  </view>
  <view class="default">
    我是插槽的默认值
  </view>
</view>

插槽组件的css内容

.wrapper {
  margin-top: 30px;
}

.default {
  display: none;
}

.header:empty + .default {
  display: block;
}

页面内容

<Mysolt>
<button>我是按钮</button>
</Mysolt>


<Mysolt>
 
</Mysolt>

<Mysolt>
<button type="primary">我是按钮</button>
</Mysolt>

实现逻辑一上来让默认的内容不显示 然后找到header判断他是否为空如果为空就去找到他的兄弟元素default即可实现插槽默认值
看效果: