关于vue.js:vue-封装组件样式小技巧

在应用vue开发时，常常会封装很多的组件不便复用，那么不免就有写款式相干组件，比方须要应用时传入色彩、高度等款式参数。
那么问题来了：咱们要怎么在款式中应用组件中接管的参数呢？或者说，咱们要怎么在款式中应用data中的变量呢？

话不多说 上菜~

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

这样咱们就在vue中实现了在款式里应用js变量的办法：
及通过css定义变量的形式，将变量在行内注入，而后在style中应用var()获取咱们在行内设置的数据即可。