uni-app中props传入的动态样式rpx在编译为H5时失效

uni-app中props传入的动态样式rpx在编译为H5时失效

开发环境 版本号 项目创建方式
HBuilderX 3.2.9 HBuilderX 
## 示例代码：

```p
子组件

<template>  
    <view @touchmove.stop.prevent>  
        <view  :style="{height: height + 'rpx'}">  
            <slot></slot>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
                name:"test",  
        props: {  
            height: {  
                type: Number,  
                default: 0  
            }  
        }  
    };  
</script>

父组件

<template>  
      <view>  
              <test  height="1000"></test>  
      </view>  
</template>

该代码在开发环境下显示正常（运行在chrome）并符合预期，但编译发布为H5后高度属性丢失，将单位换为px后可正常展示

操作步骤：

编译发布为H5（非服务端渲染）

预期结果：

同开发环境展示一致，在生产环境下子组件通过props获取到的值后能够正常渲染rpx

实际结果：

在开发环境中正常，编译发布为H5后在生产环境下无效，改为px有效

bug描述：

在开发过程中针对子组件接受props动态生成rpx样式没有问题，但在编译为H5后通过props动态生成的rpx单位无效，只能改为px单位编译后显示才正常. vue3+typescript+vite2.5.0


更多关于uni-app中props传入的动态样式rpx在编译为H5时失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

此问题已被官方复现，等待修复，详见 https://ask.dcloud.net.cn/question/136238

更多关于uni-app中props传入的动态样式rpx在编译为H5时失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX3.3.3 已修复，请升级

这是一个已知的 uni-app 编译问题。当通过 props 传递动态样式值并拼接 rpx 单位时，在 H5 生产环境下确实会出现样式失效的情况。

问题原因： 在 H5 生产构建过程中，uni-app 的样式处理器会对 rpx 单位进行转换（转换为 rem 或 vw），但动态拼接的字符串 height + 'rpx' 在编译时无法被正确识别和处理，导致最终生成的 CSS 中缺少有效的单位转换。

解决方案：

  1. 使用计算属性（推荐）
computed: {
  computedHeight() {
    return uni.upx2px(this.height) + 'px'
  }
}

模板中使用：:style="{height: computedHeight}"

  1. 在模板中直接转换
<view :style="{height: uni.upx2px(height) + 'px'}"></view>
  1. 使用行内样式对象
data() {
  return {
    styleObject: {}
  }
},
mounted() {
  this.styleObject.height = uni.upx2px(this.height) + 'px'
}
  1. 使用 CSS 变量（Vue 3）
<view :style="{'--height': height + 'rpx'}"></view>
<style scoped>
.view-class {
  height: var(--height);
}
</style>
回到顶部