Edmin
Edmin
  • 发布:2023-03-25 14:10
  • 更新:2023-03-27 13:05
  • 阅读:373

【报Bug】vue3 3.7.9和3.7.8 插槽里的组件内的class样式不生效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.7.9

第三方开发者工具版本号: 1.06.2303060

基础库版本号: 2.30.2

项目创建方式: HBuilderX

示例代码:
    <!-- 插槽 -->  
    <template>  
        <view class="board">  
            <view>组件1111</view>  
            <slot></slot>  
        </view>  
    </template>  

    <script setup>  
        import {ref, reactive, onMounted} from "vue";  
    </script>  

    <style>  
    .board{  
        display: flex;   
        flex-direction: column;  
        background-color: red;  
    }  
    </style>  

    <!-- 使用插槽 -->  
    <template>  
        <boardPage>  
            <view class="page">2222222222222</view>  
            <!-- 插槽中的组件,样式不生效 -->  
            <publishPage></publishPage>  
        </boardPage>  
    </template>  

    <script setup>  
        import boardPage from  "@/components/boardPage/boardPage.vue";  
        import publishPage from "../publishPage/publishPage.vue";  
    </script>  

    <style>  
    .page{  
        background-color: aqua;  
    }  
    </style>  

    <!-- 组件 -->  
    <template>  
        <view class="container">  
            <view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>  
            <text class="intro">详见:</text>  
        </view>  
    </template>  

    <script setup>  
        import {ref, reactive, onMounted} from "vue";  
    </script>  

    <style>  
        <!-- 样式不生效 -->  
        .container {  
            padding: 20px;  
            font-size: 14px;  
            line-height: 24px;  
            background-color: saddlebrown;  
        }  
    </style>

操作步骤:
    <!-- 插槽 -->  
    <template>  
        <view class="board">  
            <view>组件1111</view>  
            <slot></slot>  
        </view>  
    </template>  

    <script setup>  
        import {ref, reactive, onMounted} from "vue";  
    </script>  

    <style>  
    .board{  
        display: flex;   
        flex-direction: column;  
        background-color: red;  
    }  
    </style>  

    <!-- 使用插槽 -->  
    <template>  
        <boardPage>  
            <view class="page">2222222222222</view>  
            <!-- 插槽中的组件,样式不生效 -->  
            <publishPage></publishPage>  
        </boardPage>  
    </template>  

    <script setup>  
        import boardPage from  "@/components/boardPage/boardPage.vue";  
        import publishPage from "../publishPage/publishPage.vue";  
    </script>  

    <style>  
    .page{  
        background-color: aqua;  
    }  
    </style>  

    <!-- 组件 -->  
    <template>  
        <view class="container">  
            <view class="intro">本项目已包含uni ui组件,无需import和注册,可直接使用。在代码区键入字母u,即可通过代码助手列出所有可用组件。光标置于组件名称处按F1,即可查看组件文档。</view>  
            <text class="intro">详见:</text>  
        </view>  
    </template>  

    <script setup>  
        import {ref, reactive, onMounted} from "vue";  
    </script>  

    <style>  
        <!-- 样式不生效 -->  
        .container {  
            padding: 20px;  
            font-size: 14px;  
            line-height: 24px;  
            background-color: saddlebrown;  
        }  
    </style>

预期结果:

插槽内的组件里的样式生效

实际结果:

3.7.9和3.7.8,插槽内的组件里的样式不生效。3.6.18无此问题。

bug描述:

3.7.9和3.7.8,插槽内的组件里的样式不生效。3.6.18无此问题。

2023-03-25 14:10 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

测试未复现该问题,测试工程,请检查代码逻辑,如确认框架问题,通过附件提供测试工程压缩包,谢谢

  • Edmin (作者)

    代码我是一样的,第一张图和第二张图的区别,明显第一张图样式没生效。3.7.8和3.7.9样式是不生效的。而3.6.18没问题。

    2023-03-27 12:56

  • DCloud_UNI_WZF

    回复 Edmin: 可重新安装对应版本编译器再试下,如确认框架问题,私信提供下联系方式或远程方式看下

    2023-03-27 13:02

  • Edmin (作者)

    回复 DCloud_UNI_WZF: 已上传附件,可再次测试。

    2023-03-27 13:06

Edmin

Edmin (作者)

微信小程序,publishPage中的container类名,样式不生效

  • DCloud_UNI_WZF

    看了下你的测试工程,该问题是因为页面被当做组件引入导致,临时解决方案参考 https://ask.dcloud.net.cn/question/163867,后续会修复

    2023-03-27 14:32

  • Edmin (作者)

    回复 DCloud_UNI_WZF: 大概啥时候解决,我看也1个月了吧

    2023-03-27 14:36

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