uniapp vue3 setup语法 微信小程序 组件内嵌套自定义图片组件 自定义class类名显示 样式未赋值

uniapp vue3 setup语法 微信小程序 组件内嵌套自定义图片组件 自定义class类名显示 样式未赋值

在图片组件内添加了

defineOptions({
options: {
styleIsolation: 'shared', // 或 'apply-shared'
virtualHost: true // 增强样式穿透
},
externalClasses: ['custom-class'], // 允许外部传入 custom-class
})

均不生效、采用的setup语法糖写法、从模拟器上看目前是类名显示、但样式赋值不显示


13 回复

此问题为已知问题，后续版本会修复，感谢反馈，已加分。


配置 mergeVirtualHostAttributes 了吗？https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-weixin

设置过了、还是这个问题

回复 1***@163.com: 你的需求是什么？组件上的样式能应用到根元素？

回复 DCloud_UNI_JBB: 是这样的老师、在页面上使用了组件A、组件A里面嵌套了图片组件B、然后组件A可以通过自定义class样式、从而改变图片组件B的样式效果、是这样个需求

回复 1***@163.com: 发个demo，评论区发不了的话，可以在im中私聊我发demo

回复 DCloud_UNI_JBB: 在评论区里添加了、您看下有疑问没、不行的话我这边在建个demo发给您

回复 1***@163.com: 你发截图我不好判断，发demo吧

回复 DCloud_UNI_JBB: 好的

回复 1***@163.com: 记得对你的代码脱敏和精简，不要直接发你的所有业务代码

回复 DCloud_UNI_JBB: 好的、已经私发给您了

这是整体的页面效果



在微信小程序中，使用uni-app的Vue 3 setup语法时，自定义组件的样式隔离和外部类名传递需要特别注意。从你提供的信息来看，styleIsolation和externalClasses的配置方式可能存在问题。

在Vue 3的setup语法中，defineOptions通常用于定义组件选项，但微信小程序的组件配置可能需要通过其他方式处理。建议尝试以下方法：

  1. 使用uni.defineComponent配置：在自定义组件中，通过uni.defineComponent的选项配置options和externalClasses：

    export default uni.defineComponent({
  options: {
    styleIsolation: 'shared',
    virtualHost: true
  },
  externalClasses: ['custom-class'],
  setup() {
    // 组件逻辑
  }
})

  2. 检查样式作用域：确保父组件传入的custom-class类名在父组件的样式中正确定义，且选择器权重足够覆盖组件内部样式。

  3. 验证样式语法：检查自定义类名的样式是否使用正确，例如在父组件中：

    <template>
  <custom-component custom-class="my-class" />
</template>
<style>
.my-class {
  width: 100px;
  height: 100px;
}
</style>
回到顶部