ThorUI_echo
ThorUI_echo
  • 发布:2021-12-14 14:37
  • 更新:2022-02-14 17:01
  • 阅读:691

【报Bug】选择vue3发布到H5正式环境,自定义组件中,style中使用rpx单位失效,并且样式也随之丢失

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: macOS Monterey 12.0.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.3.1

浏览器平台: 手机系统浏览器

浏览器版本: 所有

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <view class="demo-box" :class="['demo-rpx']" :style="{width:width+'rpx',height:height+'rpx'}">测试rpx</view>  
        <view class="demo-box" :class="['demo-px']" :style="{width:width/2+'px',height:height/2+'px'}">测试px</view>  
    </view>  
</template>

操作步骤:
<template>  
    <view class="container">  
        <view class="demo-box" :class="['demo-rpx']" :style="{width:width+'rpx',height:height+'rpx'}">测试rpx</view>  
        <view class="demo-box" :class="['demo-px']" :style="{width:width/2+'px',height:height/2+'px'}">测试px</view>  
    </view>  
</template>

预期结果:

rpx能正常解析出来

实际结果:

rpx单位失效,并且样式也直接丢失

bug描述:

选择vue3发布到H5正式环境,自定义组件中,style中使用rpx单位失效,并且样式也随之丢失

附件图片宽高正常的是开发工具预览,rpx宽高失效的的为发布后的正式环境

附件demo已经提供,选择vue3发布即可验证问题。

2021-12-14 14:37 负责人:无 分享
已邀请:
ThorUI_echo

ThorUI_echo (作者) - 开源项目: https://thorui.cn/doc

如果不是bug,请标记不是bug或者回复一下

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

<template>  
    <view class="content">  
        <view :class="['rpxtest']" :style="{width:width*2 +'rpx',height:height*2+'rpx'}"  >  

        </view>  
        <view :class="['pxtest']" :style="{width:100+'px',height:100+'px'}">  

        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                width:200,  
                height:200,  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .rpxtest{  

        background-color: #007AFF;  
    }  
    .pxtest{  

        background-color: #4CD964;  
    }  
</style>  

没有复现到,请问你触发环境是什么样的

  • 小枫叶

    测试环境: vue版本-3,hx版本3.3.1 alpha

    2021-12-15 10:04

  • ThorUI_echo (作者)

    回复 小枫叶:是发布到线上的吗

    2021-12-15 11:13

  • ThorUI_echo (作者)

    不是本地测试

    2021-12-15 11:13

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

你的附件的demo提供下,现在看不到

ThorUI_echo

ThorUI_echo (作者) - 开源项目: https://thorui.cn/doc

demo预览都是可以的,vue2也是正常的,选择vue3发布到线上就会出现问题,rpx样式丢失

ThorUI_echo

ThorUI_echo (作者) - 开源项目: https://thorui.cn/doc

发行部署查看源码就会看到样式丢失

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

好的,我这边看一下

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

问题复现到了,等待官方修复

DCloud_UNI_FXY

DCloud_UNI_FXY

最新HBuilderX Alpha已修复

  • ThorUI_echo (作者)

    发行出现新bug了,引入wxs报错,详见:https://ask.dcloud.net.cn/question/136633

    2021-12-20 17:34

清茶涩

清茶涩

官方大哥你睡了吗,我睡不着。vue3/vite npm run dev:h5 rpx都还是原样输出,直接样式没了,src拖到hbuildx中用鼠标点点点是可以的
看图

要回复问题请先登录注册