vue使用CSS变量详解
作者：V。on
文章讲解了如何在Vue项目中使用CSS变量,包括动态计算值和根据条件计算属性,通过示例展示了如何使用CSS变量来实现动画效果和动态样式
vue使用CSS 变量
首先，我们要先知道什么是CSS变量
在我们知道什么是CSS变量之后，我们尝试把它在项目中运用起来，一些需要动态计算的值，我们就可以使用它快速的实现效果。
示例一
其中keyframes是不能直接在html中书写的，那么如何不使用js就能根据传入的值达到对应的效果呢？
如下：
<template>
<div
:style="{ '--deviation': '-' + deviation }"
class="text"
>
{{ text }}
</div>
</template>
<script>
export default {
name: 'QTest',
props: {
text: {
type: String,
default: '请传入内容'
},
// 动态传入不同的值，根据不同的值得出最终的样式
deviation: {
type: String,
default: '75%'
}
},
}
</script>
<style lang="scss" scoped>
.text {
width: 100px;
overflow: hidden;
transition-delay: 5s;
animation: itemSlide 5s linear infinite;
}
@keyframes itemSlide {
0% {
transform: translateX(0%);
}
100% {
/*使用变量*/
transform: translateX(var(--deviation));
}
}
</style>
示例二
有的时候，一些属性我们可能需要根据一些条件计算得来，那么也能很好的去使用它。
如下：
<template>
<div
:style="{ '--lineheight': lineheight }"
class="text"
>
<div class="container"></div>
</div>
</template>
<script>
export default {
name: 'QTest',
props: {
lineheight: {
type: String,
default: '200px'
}
},
}
</script>
<style lang="scss" scoped>
.text {
width: 100px;
height: 400px;
overflow: hidden;
.container {
height: calc(100% - var(--lineheight));
background-color: red;
}
}
</style>
就得到一个高度为200px的盒子：
补充：
获取元素样式：getComputedStyle([el])
const styles = getComputedStyle(document.documentElement)
const value = String(styles.getPropertyValue('--lineheight')).trim()
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。