分享一个一分钟就学会的vue小技巧(真的一看就会~~)__Vue.js
发布于 1 个月前 作者 banyungong 245 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy

贡献主题:https://github.com/xitu/juejin-markdown-themes

theme: channing-cyan highlight: vs2015

一、内容简介

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

三、最后

以后,在封装一些需要动态传入样式参数的ui组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧~~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: liangyue 原文链接:https://juejin.im/post/6911662617178144776

回到顶部