uni-app VUE3&NUVE自定义视频全屏后使用cover-view包裹的text字号异常大，VUE2中无此问题

uni-app VUE3&NUVE自定义视频全屏后使用cover-view包裹的text字号异常大，VUE2中无此问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<cover-view>  
   <text class="text">跳过</text>  
</cover-view>  

// scss  
.text{  
font-size:32rpx;  
}

操作步骤：

VUE3&nvue全屏下字号很大,单位为rpx，自定义视频全屏后的个性功能，使用cover-view 包裹的text，字号很大，VUE2中没有问题

预期结果：

字体保持和未全屏时一致

实际结果：

字号很大

bug描述：

VUE3&nvue全屏下字号很大,单位为rpx，自定义视频全屏后的个性功能，使用cover-view 包裹的text，字号很大，VUE2中没有问题


更多关于uni-app VUE3&NUVE自定义视频全屏后使用cover-view包裹的text字号异常大，VUE2中无此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app VUE3&NUVE自定义视频全屏后使用cover-view包裹的text字号异常大，VUE2中无此问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 VUE3 和 NVUE 时，自定义视频全屏后，使用 cover-view 包裹的 text 字号异常大，而在 VUE2 中没有这个问题。这个问题可能与 VUE3 和 NVUE 的渲染机制有关。

可能的原因和解决方案：

  1. 样式继承问题：

    • VUE3 和 NVUE 的渲染机制与 VUE2 有所不同，可能会导致样式继承出现问题。
    • 解决方案：尝试在 cover-view 和 text 上明确设置 font-size，避免继承样式。
    <cover-view style="font-size: 14px;">
  <text style="font-size: 14px;">Hello World</text>
</cover-view>

  2. NVUE 的样式支持：

    • NVUE 对样式的支持可能与 VUE2 有所不同，尤其是 cover-view 和 text 的样式。
    • 解决方案：检查 NVUE 文档，确保使用的样式属性在 NVUE 中完全支持。

  3. 全局样式影响：

    • 全局样式可能影响了 cover-view 和 text 的样式。
    • 解决方案：检查全局样式，确保没有冲突的样式定义。

  4. VUE3 的响应式系统：

    • VUE3 的响应式系统可能会导致某些样式行为与 VUE2 不同。
    • 解决方案：尝试使用 VUE3 的 ref 或 reactive 来动态控制样式。
    <template>
  <cover-view :style="{ fontSize: fontSize + 'px' }">
    <text :style="{ fontSize: fontSize + 'px' }">Hello World</text>
  </cover-view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fontSize = ref(14);
    return { fontSize };
  }
};
</script>
回到顶部