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

「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」

在网页前端开发中我们经常会遇到像管理后台页面这种固定左侧栏右边随浏览器大小变化的页面布局情况。 通常这种情况都是不能纯用 css 做的，都是采用 js 来控制实现的，兼容性也很强。 但是有时候想做个简单的不想去写 js 代码时，CSS3 标准中有个 calc() 函数能实现一些简单的计算功能，简化网页代码，优化网页读取速度。

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

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

定义与用法

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

1. 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
2. 任何长度值都可以使用 calc() 函数进行计算；
3. calc() 函数支持 " + ", " - ", " * ", " / " 运算；
4. 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>

2.2 效果