元素尺寸、data值传递给scss类

2.1.1 获取html元素尺寸

2.1.2 获取vue组件元素尺寸

2.1.3 将data值传递给scss类

<template>
  <div>
    <!-- 2.1.1 -->
    <div ref="myDiv">
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
      <p>内容4</p>
    </div>
    <!-- 2.1.2 -->
    <el-card ref="myVue">
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
      <p>内容4</p>
    </el-card>
    <!-- 2.1.3 -->
    <div class="calc-color" :style = "{'--color': myColor}">
      <p>内容1</p>
      <p>内容2</p>
      <p>内容3</p>
      <p>内容4</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 2.1.3
      color: '#ff0000'
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.calcHtml()
  },
  methods: {
    // 2.1.1 获取普通html元素尺寸
    calcHtml(){
      this.$nextTick.then(()=>{
        let el = this.$refs.myDiv
        let elStyle = window.getComputedStyle(el)
        console.log(elStyle.height) // 高度 输出带px 105px
        console.log(elStyle.width)  // 宽度 输出带px 1200px
      })
    },
    // 2.1.2 获取vue组件元素尺寸 方式一
    calcVue1(){
      this.$nextTick.then(()=>{
        let vueEl = this.$refs.myVue
        console.log(vueEl.$el.clientHeight) // 高度 直接输出 105
        console.log(vueEl.$el.clientWidth)  // 宽度 直接输出 1200
      })
    },
    // 2.1.2 获取vue组件元素尺寸 方式二
    calcVue2(){
      this.$nextTick.then(()=>{
        let vueEl = this.$refs.myVue
        let elStyle = window.getComputedStyle(vueEl.$el)
        console.log(elStyle.height) // 高度 输出带px 105px
        console.log(elStyle.width)  // 宽度 输出带px 1200px
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// 2.1.3
.calc-color {
    color: var(--color);
}
</style>