动态给元素节点绑定 class 问题在uni-app中子元素样式不生效的问题

动态给元素节点绑定 class 问题在uni-app中子元素样式不生效的问题

示例代码：

<template>  
  <view class="is-today" :class="{ 'is-selected': test() }">  
        <view class="box" @click="handle()">点击我变黄1</view>  
    </view>  
</template>  

<script lang="uts" setup>  
    import { ref } from "vue";  
    const active = ref(false);  
    function handle() {  
        active.value = true;  
    }  
    function test() {  
        return active.value;  
    }  
</script>  

<style>  
    .is-today {  
        background: red;  
        padding: 200rpx;  
    }  
    .is-today .box {  
        height: 500rpx;  
        background: green;  
    }  
    .is-selected {  
        background: yellow;  
    }  
    .is-selected .box {  
        height: 300rpx;  
        background: salmon;  
    }  
</style>

操作步骤：

  • 直接点击子元素（绿色区域）

预期结果：

  • 子元素改变样式

实际结果：

  • 子元素新样式没有生效

bug描述：

动态给元素节点绑定 class 问题，子元素样式不生效的问题。 这是BUG还是设计就是这样的呢。

项目信息 描述
产品分类 uniapp/App
PC开发环境 Windows
手机系统 Android
手机系统版本 Android 12
手机厂商 realme
手机机型 真我q3s
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于动态给元素节点绑定 class 问题在uni-app中子元素样式不生效的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

你是 uniapp x 吗，我看你用到了 uts。但是 bug 信息里说的是 nvue 和 unapp。
如果是 uniappx，目前是设计如此，父元素的调整不会改变子元素的样式，目前暂不支持 web 中这种写法。你需要明确要改动的具体样式，也就是通知子元素、子组件改变了 class，从而实现子元素样式动态改变。

更多关于动态给元素节点绑定 class 问题在uni-app中子元素样式不生效的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


因为发布问答的地方没有 uniappx 的选项，所以只能选uniapp。 OK，既然是设计如此那就没问题了

这是一个在 uni-app nvue 中的样式渲染机制问题，不是 BUG，而是 nvue 与普通 vue 页面在样式处理上的差异。

在 nvue 中，CSS 的实现基于 Weex 的渲染引擎，对样式的支持与 Web 有所不同。主要问题在于：

  1. nvue 中的样式继承限制：nvue 不支持 CSS 的完整继承链，子元素无法通过父元素的类名变化自动继承样式更新。

  2. 样式作用域隔离：在 nvue 中，.is-selected .box 这样的嵌套选择器在动态类名更新时可能无法正确触发子元素重渲染。

解决方案：

将子元素的样式绑定也改为响应式：

<template>  
  <view class="is-today" :class="{ 'is-selected': test() }">  
    <view class="box" :class="{ 'selected-box': test() }" @click="handle()">
      点击我变黄1
    </view>  
  </view>  
</template>  

<style>  
.is-today {  
  background: red;  
  padding: 200rpx;  
}  
.is-today .box {  
  height: 500rpx;  
  background: green;  
}  
.is-selected {  
  background: yellow;  
}  
.selected-box {  
  height: 300rpx !important;  
  background: salmon !important;  
}  
</style>

或者使用计算属性直接控制子元素的样式：

<template>  
  <view class="is-today" :class="{ 'is-selected': test() }">  
    <view class="box" :style="boxStyle" @click="handle()">
      点击我变黄1
    </view>  
  </view>  
</template>  

<script lang="uts" setup>  
import { ref, computed } from "vue";  
const active = ref(false);  

function handle() {  
  active.value = true;  
}  

function test() {  
  return active.value;  
}  

const boxStyle = computed(() => {
  return active.value ? {
    height: '300rpx',
    backgroundColor: 'salmon'
  } : {}
})
</script>
回到顶部