vue 封装组件样式小技巧

Posted 杭州蘇小小

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()获取我们在行内设置的数据即可。

以上是关于vue 封装组件样式小技巧的主要内容,如果未能解决你的问题,请参考以下文章

Vue如何更好的封装组件?几个小技巧助你成为组件封装达人,让我们封装的组件更加优雅易用

我用这9个小技巧封装Vue组件,老大夸我’封得好‘

封装Vue组件的一些技巧

vue小技巧

全是干货!封装Vue组件的一些技巧

封装Vue组件的一些技巧