首先,我们要先知道什么是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()
标签:vue,变量,default,text,--,CSS,String From: https://www.cnblogs.com/caihongmin/p/17043039.html