一、内容简介
在使用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组件是不是简便了不少。你学会了么?赶快在项目中尝试一下吧~~
【责任编辑:庞桂玉 TEL:(010)68476606】
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/NAQ8J7ZhWFAC7xqUaxSPrQ
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/NAQ8J7ZhWFAC7xqUaxSPrQ
版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除