9***@qq.com
9***@qq.com
  • 发布:2022-07-13 17:01
  • 更新:2024-01-18 09:59
  • 阅读:414

具名插槽使用的template在微信开发者平台中编译为view,导致自定义组件内百分比宽高等无法正常应用

分类:uni-app

在父组件中使用具名插槽,插槽内展示自定义组件。正常而言,template应该是不渲染成具体标签的。

<uni-list class="ac-list" border>  
            <uni-list-item class="list-item" v-for="ac of activityList" :key="ac.activityId">  
                <template v-slot:body style="width: 100%;">  
                    <activity-item  :activityData="ac" ></activity-item>  
                </template>  
            </uni-list-item>  
        </uni-list>

但是微信开发者平台中查看转换后的代码,发现template被渲染成了view。


导致在实际的dom结构中,自定义组件外边出现了一层标签,组件内部的百分比宽高无法正常应用上。

注:template上的style是为了测试多出来的那一层view是否为template转换而来加上的。

想问一下这个template渲染成了一个view是什么原因?

2022-07-13 17:01 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

这是因为小程序中插槽内容需要是 view 包裹,而不是 template

  • z***@outlook.com

    我也遇到了,cli创的项目,vue3.2.39。我拆分复现了一下,我这里是movable-area的问题,在movable-area里漏插槽,漏出的就会自动多一层带插槽名字class的view

    2022-12-16 17:06

z***@outlook.com

z***@outlook.com

随便写个测试组件也是有问题的

小小菜76055421

小小菜76055421

怎么解决这个问题呢

  • DCloud_UNI_OttoJi

    小程序平台强制在 slot 上使用 view 进行包装,你可以参考 https://github.com/dcloudio/uni-app/issues/4629 进行兼容

    2024-01-18 10:34

要回复问题请先登录注册