收藏
回答

自定义组件如何判断slot是否存在

在小程序的组件中定义如下:

<view>
<slot name="a"></slot>
<slot name="b"></slot>
</view>

使用时

<component-test>
<view slot="b">test</view>
</component-test>

该怎么判断slot a是否存在呢?(不存在的元素做隐藏)

回答关注问题邀请回答
收藏

11 个回答

  • LastLeaf
    LastLeaf
    2018-04-26

    确认一下,你的需求是,component-test 组件需要能够判断自己的某个 slot 中是否实际存在节点?

    2018-04-26
    有用 1
    回复
  • LastLeaf
    LastLeaf
    2018-04-26

    我们考虑一下添加这个特性。


    不过,限于小程序的架构,即使添加这个特性,接口只能做成异步的(类似于 wx.createSelectorQuery)。

    2018-04-26
    有用
    回复
  • LastLeaf
    LastLeaf
    2018-04-26

    你好,目前没有相关特性支持。可否描述一下你的使用场景呢?我们会考虑添加这个特性。

    2018-04-26
    有用
    回复 3
    • Rebuilding
      Rebuilding
      2019-06-06

      应用场景举例:

      判断是否传入 <slot name="a"></slot>,若传入,则显示该slot内容,否则,显示一个默认的view内容

      2019-06-06
      回复
    • LastLeaf
      LastLeaf
      2019-06-10回复Rebuilding

      view 和 slot 是否在同一个位置上呢?

      2019-06-10
      回复
    • Rebuilding
      Rebuilding
      2019-06-10回复LastLeaf

      是的。

      就好像显示商品的图片,如果有配置则显示配置的图片(slot传入),如果没用的话显示一个默认的图片(静态固定的)。

      显示位置、效果等都是一样的,区别仅在于参数

      2019-06-10
      2
      回复
  • 阿金
    阿金
    2020-07-22

    方案:

    如下,当没有内容时,显示空图标

    wxml:

    <view class="container" >
      <view class="page-header"><slot name="header" /></view>
      <view class="page-body">
          <view class="page-content"><slot  /></view>
          <empty class="empty" text="{{emptyText}}" icon="{{emptyIcon}}" />
      </view>
    </view>
    


    wxss:

    .empty{
      visibility:hidden
    }
    
    .page-content:empty + .empty{
      visibility:visible;
    }
    

    2020-07-22
    有用 1
    回复
  • Meters
    Meters
    2019-01-02

    刚刚发现可以用 :empty 伪类来找到这个节点,然后把节点给隐藏起来

    2019-01-02
    有用 1
    回复 1
    • 阿金
      阿金
      2020-07-22
      目前最有效黑科技.
      2020-07-22
      回复
  • Soy_meng
    Soy_meng
    2018-04-26

    类似vue会提供this.$slots['name']用于判断。

    功能场景就是上面我写的,实现一个多slot组件,当复杂度较高时可以通过判断slot是否存在来控制组件展示样式

    2018-04-26
    有用 1
    回复
  • uniapp开发 vue开发 小程序开发
    uniapp开发 vue开发 小程序开发
    2022-04-24

    <view a:if="{{$slots.$default}}" class="am-input-label {{labelCls}}">

    <slot />

    </view>

    slot能否放到js变量里 需要<component><sub data-id="1">标题1</sub><sub data-id="2">标题2</sub></component> 获取中间的拼接成二维数组 在组件里使用 这样代码比较直观 不然只能写成<sub data-id="1" data-title="标题1" />

    2022-04-24
    有用
    回复
  • 杨金林
    杨金林
    2019-07-25

    支付宝小程序上可以这么做 微信上失效了

    <view a:if="{{$slots.$default}}" class="am-input-label {{labelCls}}">

    <slot />

    </view>


    2019-07-25
    有用
    回复
  • Yika
    Yika
    2018-07-13

    查了一下,并没有相关的 api。

    业务情况是需要先根据是否提供了 slot 再决定如何渲染。

    2018-07-13
    有用
    回复
  • LutaLg
    LutaLg
    2018-04-26

     虽然没实现过,不过现在已经有相关的api了

    2018-04-26
    有用
    回复 3
    • 陟上晴明。
      陟上晴明。
      2021-08-16
      找了一圈没看到你说的相关API,能不全一下你找到的文档吗?
      2021-08-16
      回复
    • 陟上晴明。
      陟上晴明。
      2021-08-16
      找了一圈没有看到你说的这个API,你可以补全一下你说的文档链接吗?
      2021-08-16
      回复
    • 官方提醒
      官方提醒
      2021-12-09回复陟上晴明。
      兄弟,找到他说的那个api了嘛?
      2021-12-09
      回复

正在加载...

登录 后发表内容