关于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() 获取咱们在行内设置的数据即可。