快捷導航

Vue3在css中使用js變量及其原理解讀

更新時間：2023年09月13日 14:14:13 作者：靜尾

這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結(jié)合實例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細，需要的朋友可以參考下

Vue3在css中使用js變量及其原理解讀

實現(xiàn)原理

首先css中是有變量的，可以像js變量一樣在style中使用，然后Vue3支持將js中的變量傳入style中，相當于在css中創(chuàng)建了同名的變量，值綁定到j(luò)s變量上，后續(xù)會跟著js中的變量一同響應(yīng)式變化。

CSS變量介紹

CSS變量的聲明方式：

--color: red;

CSS變量的使用方式：

h1 {
	color: var(--color); 
}

作用域：

body {  
	--color: red; 
} 
h1 {  
	color: var(--color); /** 這里獲取到的是全局聲明的變量，值為red **/
} 
div {  
	--color: blue;  
	color: var(--color); /** 這里獲取到的是局部聲明的變量，值為blue **/ 
}

變量的作用域就是它所在的選擇器的有效范圍。

默認值：

div { width: var(–width, 100px) }

假如沒有定義 --width 變量，那么就會取第二個參數(shù)的值，這就很適合我們用來封裝組件。

在 vue3 的 <style> 中使用 <script> 里的變量的方式

創(chuàng)建一個 vite 項目（vue-cli創(chuàng)建的不可）:

npm init vite-app vars

項目初始化

編寫代碼：

<template>
  <h1>Vue</h1>
</template>
<script>
export default {
  data () {
    return {
      border: '1px solid black',
      color: 'red'
    }
  }
}
</script>
<style vars="{ border, color }" scoped>
h1 {
  color: var(--color);
  border: var(--border);
}
</style>

且在style中的變量也是響應(yīng)式的。

原理：vue控制的是元素的style屬性，使其動態(tài)變化。

使用全局變量的方式：

<style vars="{ color }" scoped>
h1 {
  color: var(--global:color);
}
</style>

兼容性：不兼容IE

vue3中css使用script中定義的變量

代碼

<template>
  <div class="box">haha</div>
</template>
<script setup lang="ts">
const boxWidth = '500px'
</script>
<style lang="scss">
.box {
  width: v-bind(boxWidth);
  height: 200px;
  background-color: red;
}
</style>

效果

在這里插入圖片描述