uni-app vue3项目页面参数为className时，页面根标签的class会被覆盖，导致页面样式丢失

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app vue3项目页面参数为className时，页面根标签的class会被覆盖，导致页面样式丢失

项目信息 详情
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 12.5
浏览器平台 Chrome
浏览器版本 131.0.6778.205
项目创建方式 CLI
CLI版本号 3.0.0-4030620241128001

操作步骤：

  1. 下载vite-ts cli模板
  2. 添加sass插件
  3. 创建一个页面，写入下面的代码
<template>  
    <view class="test">  
        <view class="test-text">测试</view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {};  
    }  
};  
</script>  

<style lang="scss" scoped>  
.test {  
    .test-text {  
        color: red;  
    }  
}  
</style>
  1. 从index跳转到这个页面并携带参数 className=123

预期结果：

  • 页面样式正常，文字为红色

实际结果：

  • 根元素class被覆盖，文字是默认颜色

bug描述：

vue3项目页面参数为className时，页面根标签的class会被覆盖，导致页面样式丢失；参数为class时，页面根标签的class会合并


Harmonyos Next教程
2 回复


在uni-app Vue3项目中，如果你发现页面参数为className时，页面根标签的class会被覆盖，这通常是因为Vue的class绑定机制与页面的初始class设置发生了冲突。Vue3在处理class绑定时，如果使用了:class或v-bind:class，它会根据绑定的值动态更新元素的class。如果绑定的class和静态class有重叠，动态class会覆盖静态class。

为了解决这个问题，你可以采用以下几种方法：

方法一：使用对象语法结合静态class

你可以使用Vue的class对象语法，同时保留静态class。这样可以确保静态class不会被完全覆盖。

<template>
  <view :class="['static-class', dynamicClassObject]">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicClassObject: {
        'dynamic-class-1': true,
        'dynamic-class-2': false
      }
    };
  }
};
</script>

<style>
.static-class {
  /* 静态样式 */
}
.dynamic-class-1 {
  /* 动态样式1 */
}
.dynamic-class-2 {
  /* 动态样式2 */
}
</style>

方法二：使用数组语法结合字符串

你也可以使用数组语法，将静态class作为数组的一个元素，动态class作为另一个元素。

<template>
  <view :class="['static-class', dynamicClass]">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicClass: 'dynamic-class'
    };
  }
};
</script>

<style>
.static-class {
  /* 静态样式 */
}
.dynamic-class {
  /* 动态样式 */
}
</style>

方法三：确保className参数的正确使用

如果你是在组件或页面间传递className作为参数，确保在使用时不会覆盖原有的class。例如，你可以通过props接收className，然后在模板中与其他class一起使用。

<template>
  <view :class="['static-class', className]">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  props: {
    className: {
      type: String,
      default: ''
    }
  }
};
</script>

<style>
.static-class {
  /* 静态样式 */
}
</style>

以上方法可以有效避免页面根标签的class被覆盖，确保页面样式正确应用。根据具体需求选择合适的方法，可以确保你的uni-app Vue3项目页面样式不受影响。

回到顶部