uni-app nvue 引入的组件内其他组件的class失效

uni-app nvue 引入的组件内其他组件的class失效

示例代码：

组件 my-time.nvue 在页面 list.nvue 中使用，class 失效，无颜色，这段代码直接在 list.nvue 页面中使用正常红色

<template>  
  <view>  
        <uni-dateformat  
            :class="['info-label']"  
            :date="date"  
            :threshold="[60000, 3600000]"  
            format="yyyy/MM/dd hh:mm:ss"  
        />  
    </view>  
</template>  
<style scoped lang="scss">  
.info-label {  
  color: red;  
}  
</style>

操作步骤：

见上

预期结果：

红色

实际结果：

原色

bug描述：

nvue 引入的组件 class 失效

经测试 vue2 版本无 bug


| 信息类别         | 内容                           |
|------------------|-------------------------------|
| 产品分类         | uniapp/App                    |
| PC开发环境       | Windows                       |
| PC开发环境版本   | win10                         |
| HBuilderX类型    | 正式                          |
| HBuilderX版本    | 4.56                          |
| 手机系统         | Android                       |
| 手机系统版本      | Android 14                    |
| 手机厂商         | 小米                          |
| 手机机型         | mi 13                         |
| 页面类型         | nvue                          |
| Vue版本          | vue3                          |
| 打包方式         | 云端                          |
| 项目创建方式     | HBuilderX                     |

更多关于uni-app nvue 引入的组件内其他组件的class失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

之前vue2 + hbuilder 3.99 是正常的，最近迁移到4.56 + vue3 不正常了

更多关于uni-app nvue 引入的组件内其他组件的class失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的原因是nvue在Vue3模式下对样式作用域的处理与常规Vue组件有所不同。以下是解决方案：

  1. 对于nvue组件中的样式，建议使用全局样式定义，因为scoped样式在nvue中可能不会按预期工作：
/* 在App.nvue或全局样式文件中定义 */
.info-label {
  color: red;
}
  1. 或者使用内联样式替代class：
<uni-dateformat
  style="color:red"
  :date="date"
  :threshold="[60000, 3600000]"
  format="yyyy/MM/dd hh:mm:ss"
/>
  1. 如果必须使用class，可以尝试移除scoped：
<style lang="scss">
.info-label {
  color: red;
}
</style>
回到顶部