uni-app nvue组件内，text标签切换样式后无法还原初始样式

uni-app nvue组件内，text标签切换样式后无法还原初始样式

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：正式

HBuilderX版本号：3.1.3

手机系统：Android

手机系统版本号：Android 10

手机厂商：模拟器

手机机型：雷电模拟器和真机一加8pro

页面类型：nvue

打包方式：云端

示例代码：

<text :class="[active?'nTTxt-ac':'nTTxt']" :style="active?'':('color:'+getTxtColor)" @tap="changeItem">{{title}}</text>

export default {  
    data() {  
        return {  
                  active:true,  
                  getTxtColor:"#fffffff",  
                  title:"test"  
               }  
        },  
       methods:{  
      changeItem(e){  
            this.active = !this.active;  
          }  
}

$mainColor: #2b9939 !default;  
.nTTxt-ac{color:$mainColor};

操作步骤：

点击切换active

预期结果：

能还原.nTTxt-ac的颜色

实际结果：

变成了默认颜色

bug描述：

text标签切换样式后无法还原初始样式


更多关于uni-app nvue组件内，text标签切换样式后无法还原初始样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

目前我使用了scss变量处理

更多关于uni-app nvue组件内，text标签切换样式后无法还原初始样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html


之前的版本有这个问题吗？

我是看了3.1.2.20210206的nvuecss兼容变多了才使用nvue的，之前没开发过相关的

确认 nvue 一直存在此问题，还原时需要自行还原为初始颜色

这是一个典型的nvue样式优先级问题。在nvue中，动态样式(:style)的优先级高于class样式，导致切换时样式无法正确还原。

问题出在代码逻辑上：

  1. 初始状态active为true，应用.nTTxt-ac类
  2. 点击后active变为false，此时会同时应用:style="‘color:’+getTxtColor"和内联样式
  3. 由于nvue中内联样式优先级高，会覆盖class样式

解决方案：

  1. 移除内联样式绑定，完全通过class控制：
<text :class="[active?'nTTxt-ac':'nTTxt']" @tap="changeItem">{{title}}</text>
  1. 在style中明确定义.nTTxt样式：
$mainColor: #2b9939 !default;
.nTTxt-ac{color:$mainColor};
.nTTxt{color:#ffffff};
回到顶部