7***@qq.com
7***@qq.com
  • 发布:2023-05-18 14:59
  • 更新:2023-05-18 14:59
  • 阅读:135

【报Bug】在app.vue的 style 中 声明的变量如果使用v-bind 无法在全局生效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

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

浏览器平台: Edge

浏览器版本: 111.0.1661.54

项目创建方式: CLI

CLI版本号: 3.0.0-alpha-3070720230316001

示例代码:
<script setup lang="ts">  
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";  
import { ref } from "vue";  
onLaunch(() => {  
  console.log("App Launch");  
});  
onShow(() => {  
  console.log("App Show");  
});  
onHide(() => {  
  console.log("App Hide");  
});  
const systemInfo = uni.getSystemInfoSync();  
const windowWidth = ref(`${systemInfo.windowWidth}px`);  
const windowHeight = ref(`${systemInfo.windowHeight}px`);  
console.log(windowWidth, windowHeight);  
</script>  
<style lang="scss">  
@import "@dcloudio/uni-ui/lib/uni-scss/index.scss";  
@import "./style/base.scss";  
@for $i from 1 through 100 {  
  .b-#{$i}vw {  
    width: calc(v-bind("windowWidth") * ($i / 100));  
  }  
  .b-#{$i}vh {  
    height: calc(v-bind("windowHeight") * ($i / 100));  
  }  

  @for $ii from 1 through 100 {  
    // $value: $i + ($ii / 100);  
    .b-#{$i}-#{$ii}vw {  
      width: calc(v-bind("windowWidth") * ($i + $ii / 100));  
    }  
    .b-#{$i}-#{$ii}vh {  
      height: calc(v-bind("windowHeight") * ($i + $ii / 100));  
    }  
  }  
}  
</style>

操作步骤:
<script setup lang="ts">  
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";  
import { ref } from "vue";  
onLaunch(() => {  
  console.log("App Launch");  
});  
onShow(() => {  
  console.log("App Show");  
});  
onHide(() => {  
  console.log("App Hide");  
});  
const systemInfo = uni.getSystemInfoSync();  
const windowWidth = ref(`${systemInfo.windowWidth}px`);  
const windowHeight = ref(`${systemInfo.windowHeight}px`);  
console.log(windowWidth, windowHeight);  
</script>  
<style lang="scss">  
@import "@dcloudio/uni-ui/lib/uni-scss/index.scss";  
@import "./style/base.scss";  
@for $i from 1 through 100 {  
  .b-#{$i}vw {  
    width: calc(v-bind("windowWidth") * ($i / 100));  
  }  
  .b-#{$i}vh {  
    height: calc(v-bind("windowHeight") * ($i / 100));  
  }  

  @for $ii from 1 through 100 {  
    // $value: $i + ($ii / 100);  
    .b-#{$i}-#{$ii}vw {  
      width: calc(v-bind("windowWidth") * ($i + $ii / 100));  
    }  
    .b-#{$i}-#{$ii}vh {  
      height: calc(v-bind("windowHeight") * ($i + $ii / 100));  
    }  
  }  
}  
</style>  

预期结果:

预期应该是在全局中生效

实际结果:

全局中无效。疑似在渲染时,未将app.vue中声明的变量加入页面,导致app.vue中的全局css样式无法生效

bug描述:

在app.vue的 style 中 声明的变量如果使用v-bind 无法在全局生效

2023-05-18 14:59 负责人:无 分享
已邀请:

要回复问题请先登录注册