Durante el desarrollo, encontrará los siguientes requisitos:
- Usando variables SCSS en JS. Por ejemplo, si un color está definido en scss y el componente el-menu usa este color como color de fondo, necesita obtener la variable scss y pasar el valor de la variable al componente el-menu a través del atributo background-color (de Por supuesto, también puedes usarlo en JS Redefinir una variable para almacenar el color).
- Usando variables JS en SCSS. Por ejemplo, con la función dinámica de cambio de apariencia, si el usuario selecciona un determinado color como color del tema, el color del tema de todo el sistema cambiará a este color del tema. El color seleccionado por el usuario se almacena en una variable JS y SCSS necesita usar el color almacenado en la variable JS. Escenas similares incluyen el modo oscuro, etc.
Este artículo proporciona ideas para resolver los problemas anteriores.
1 JS usa variables SCSS
1.1 Crear archivo de variables SCSS
Cree un directorio scss en el directorio src , que almacena archivos scss . Cabe señalar aquí que si JS quiere usar variables definidas en archivos SCSS, en vue3, el formato de nombre de archivo SCSS para almacenar variables es xxx.module.scss .
Como variables.module.scss . A diferencia de vue 2.x, el .module aquí no se puede omitir. En vue 2.x, no es necesario utilizar el nombre del archivo xxx.module.scss .
Creado en el directorio src/scss/
Archivo config.module.scss , que se utiliza para definir variables scss :
$titleColor: #FF0000;
1.2 Exportar variables SCSS
Hay una variable definida en el archivo config.module.scss creado anteriormente : $titleColor .
Si solo lo usamos en la etiqueta de estilo de otros archivos scss o vue , solo necesitamos usar @import para introducir config.module.scss en el archivo correspondiente . Pero si necesita usarlo en JS/TS en script , también necesita exportar las variables que necesita usar mediante la exportación :
$titleColor: #FF0000;
:export {
titleColor: $titleColor;
}
Esto exportará el valor de $titleColor a JS/TS a través del nombre de la variable titleColor .
1.3 Uso de variables SCSS
Si desea utilizar las variables anteriores en el script del archivo vue , primero importe el archivo scss:
import config from '@/scss/config.module.scss'
El valor de configuración es el objeto del archivo scss : exportar . Objeto de configuración de salida:
console.log(config)
Salida de consola:
{
titleColor: '#FF0000'}
En este punto, puede obtener el valor de $titleColor en el archivo scss a través de config.titleColor .
El código de vista es el siguiente:
<template>
<div>
<h1 :style="{color: color}">JS 获取 SCSS 变量值</h1>
</div>
</template>
<script lang="ts" setup>
import {
ref } from 'vue'
import config from '@/scss/config.module.scss'
const color = ref(config.titleColor)
</script>
2 variables CSS
Antes de discutir el uso de variables JS en código SCSS, debemos hablar sobre las variables CSS en CSS Next. La mayoría de mis amigos están familiarizados con CSS 2 y CSS 3, y CSS Next no es nada nuevo. Una de las capacidades más poderosas de CSS Next son las variables CSS.
2.1 Variables CSS globales
Podemos crear el archivo test.css en el directorio src/scss anterior para intentar usar variables css.
:root {
--bgColor: pink;
}
body {
background-color: var(--bgColor);
}
Las variables CSS globales se definen en :root . La convención de nomenclatura de las variables CSS comienza con dos -. Una variable CSS global se define arriba y el nombre de la variable es –bgColor .
Cuando utilice variables, utilice la función CSS var() .
Introduce este archivo en main.ts :
import '@/scss/test.css'
En este momento, puede ver que el color de fondo del navegador se vuelve rosa.
2.2 variables CSS dentro de los componentes
Las variables CSS también se pueden utilizar en componentes. Simplemente defina la variable en el selector correspondiente.
<template>
<div class="demo">
<div class="css-div">CSS 变量</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
.demo {
--font-size: 30px;
.css-div {
--textColor: blue;
font-size: var(--font-size);
color: var(--textColor);
}
}
</style>
Con la base de las variables CSS, ahora podemos discutir cómo usar variables JS en scss.
3 SCSS usa variables JS
Usamos una demostración para ilustrar cómo usar variables js en scss: hay tres botones y un div. Al hacer clic en los tres botones se cambiará el color de fondo y el color del texto del div.
3.1 Código básico
Primero implemente el código básico de la página:
<template>
<div class="demo">
<button v-for="(item, index) in btns"
:key="index"
@click="onBtnClick(item.bgColor, item.textColor)"
>{
{ item.title }}</button>
<div>
<div class="example">Hello World</div>
</div>
</div>
</template>
<script lang="ts" setup>
const btns = [
{
title: '红色主题', bgColor: '#FF9191', textColor: '#FF0000' },
{
title: '蓝色主题', bgColor: '#B3C4FF', textColor: '#042BA9' },
{
title: '默认主题', bgColor: '#333333', textColor: '#FFFFFF' }
]
const onBtnClick = (bgColor: string, textColor: string) => {
console.log(bgColor, textColor)
}
</script>
<style scoped lang="scss">
.demo {
padding: 10px;
.example {
--textColor: #FFFFFF;
--bgColor: #333333;
display: inline-block;
margin-top: 20px;
font-size: 20px;
padding: 20px 50px;
color: var(--textColor);
background: var(--bgColor);
}
}
</style>
La página es la siguiente:
El código anterior es relativamente simple: la variable btns define tres botones y los muestra a través de v-for . Al hacer clic en el botón, pase los dos parámetros bgColor y textColor al evento de clic en la función BtnClick . Muestra el div de Hello World y controla el color de fondo y el color del texto a través de las dos variables -textColor y -bgColor .
El siguiente paso es utilizar diferentes colores de texto y colores de fondo al hacer clic en diferentes botones.
Vue3 proporciona dos formas de cambiar dinámicamente las variables CSS. Los dos métodos siguientes se implementan en función del código básico anterior:
3.2 Método 1: establecer propiedad
Vue proporciona el método setProperty para cambiar las variables CSS.
- Agregue el atributo ref al div de destino:
<template>
...
<div>
<div class="example" ref="exampleRef">Hello World</div>
</div>
</div>
</template>
- Obtenga la referencia ( ref ) al div :
import {
ref } from 'vue'
const exampleRef = ref<HTMLDivElement | null>()
...
- Llame al método setProperty que hace referencia al atributo de estilo :
<script lang="ts" setup>
...
const onBtnClick = (bgColor: string, textColor: string) => {
if (exampleRef.value) {
exampleRef.value?.style.setProperty('--textColor', textColor)
exampleRef.value?.style.setProperty('--bgColor', bgColor)
}
}
</script>
...
3.3 Método 2: enlace v
Vue3 proporciona la función v-bind para el estilo de archivos vue , que permite vincular variables JS/TS a variables CSS.
- Defina dos variables en TS para almacenar los dos parámetros pasados al hacer clic en el evento:
const currentBgColor = ref('#333333')
const currentTextColor = ref('#FFFFFF')
- Los parámetros del punto medio del evento de clic se asignan a las dos variables anteriores:
const onBtnClick = (bgColor: string, textColor: string) => {
currentBgColor.value = bgColor
currentTextColor.value = textColor
}
- Utilice v-bind con estilo para vincular las dos variables JS anteriores :
.demo {
...
.example {
--textColor: v-bind(currentTextColor);
--bgColor: v-bind(currentBgColor);
...
color: var(--textColor);
background: var(--bgColor);
}
}
Utilice los dos métodos anteriores según sus propias preferencias. Puede intentar implementar funciones como el cambio de tema y el cambio dinámico de apariencia basándose en las ideas anteriores. Continuaremos discutiendo este tema en la siguiente serie práctica de artículos.
Gracias por leer este artículo. Si este artículo te ha brindado un poco de ayuda o inspiración, apóyalo tres veces, dale me gusta, síguelo y recopila. El autor continuará compartiendo más información útil contigo.