Vue中使用 calc 计算长度并传参

飞熊 • 2023年4月28日上午10:16 • 前端开发 • 阅读 202

1. calc() 函数简介与使用

calc()：英文单词 calculate (计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中 border、margin、padding 以及 width 等属性的值。

定义与用法

calc() 函数用于动态计算长度值；（支持版本：CSS3）

运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)；
任何长度值都可以使用 calc() 函数进行计算；
calc() 函数支持 ” + “, ” – “, ” * “, ” / ” 运算；
calc() 函数使用标准的数学运算优先级规则；

语法

calc(expression)

值	描述
expression	必须，一个数学表达式，结果将采用运算后的返回值。

浏览器支持

表格中的数字表示支持该函数的第一个浏览器版本号。
“webkit” 或 “moz” 或 “o” 指定的数字为支持该函数的第一个版本号前缀。

函数	谷歌	IE	火狐	Safari	Opera
calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

2. 使用 calc 计算长度并传参

需求：
根据服务端返回的数组长度，来计算元素的宽度并在屏幕宽度变化时能够兼容，这是我们就可以考虑使用 calc 计算长度并传参。

2.1 完整代码

<template>
  <div>
    <div class="home">
      <div class="test1" v-for="item in resArr" :key="item" :style="div1Width()"></div>
    </div>
    <div class="test2" :style="div2Width()"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resArr:[1,3,5,7] // 模拟服务端返回数据
    };
  },
  methods: {
    div1Width(){
      let arrLength = this.resArr.length;
      return `width: calc((100% - 200px)/${arrLength});`
    },
    div2Width(){
      let arrLength = this.resArr.length*100 + 'px';
      return `width: calc(100% - ${arrLength});`
    },
  }
};
</script>

<style lang="stylus" scoped>
.home{
  display:flex;
  justify-content: space-around;
  .test1{
    height:20px;
    background-color: pink;
  }
}
.test2{
  margin-top:30px;
  height:20px;
  background-color: red;
}
</style>