一个 1 分钟就学会的 vue 小技巧(真的一看就会)
前端瓶子君
共 1418字,需浏览 3分钟
·
2021-03-01 01:41
一、内容简介
在使用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组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧~~
源自:https://juejin.cn/post/6911662617178144776
声明:文章著作权归作者所有,如有侵权,请联系小编删除。
最后
评论