tuxh
tuxh
  • 发布:2021-10-24 20:50
  • 更新:2021-12-27 20:17
  • 阅读:622

props 传入的动态样式rpx编译为H5时失效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 20h2

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

浏览器平台: Chrome

浏览器版本: 95.0.4638.54

项目创建方式: HBuilderX

示例代码:

子组件

<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

2021-10-24 20:50 负责人:无 分享
已邀请:
ThorUI_echo

ThorUI_echo - 开源项目: https://thorui.cn/doc

DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX3.3.3 已修复,请升级

该问题目前已经被锁定, 无法添加新回复