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


杭州蘇小小
178 声望12 粉丝

我是一名 WEB前端 开发者不断在前端这条路上努力拼搏着。我喜欢代码的逻辑有序性,每一行代码都有其不同的作用,所有的代码加起来就可以让用户能愉快的体验我的产品。我喜欢研究,遇到难题我不退缩,我相信我可以...


« 上一篇
js 黑魔法