tecnología

Vue3, Vite, Menos, JS

Fondo

Hola a todos, estoy escribiendo una función Less Plugin en mi proyecto Vue3. La función es obtener el código de color de un objeto de color mediante el parámetro clave.

El archivo Less Plugin:

 getColor: function (key) { const COLORS = { 'white-opa-03': 'rgba(255, 255, 255, 0.3)', 'white-opa-04': 'rgba(255, 255, 255, 0.4)', 'black-opa-045': 'rgba(0, 0, 0, 0.45)', 'black-opa-065': 'rgba(0, 0, 0, 0.65)', } return COLORS[key] }

Cómo llamé a la función de complemento

 <style lang="less" scoped"> @plugin '../../../public/assets/style/plugins/color.js'; .label { color: getColor('black-opa-045'); } </style>

El problema

Sin embargo, en el navegador, no devolvió el código de color con éxito, pero queda para mostrar la llamada de función completa. resultado del navegador

Lo que he probado:

• Cuando traté de codificar en la función getColor para que obtuviera un color específico en lugar de usar el parámetro clave, funcionó.

 getColor: function (key) { const COLORS = { 'white-opa-03': 'rgba(255, 255, 255, 0.3)', 'white-opa-04': 'rgba(255, 255, 255, 0.4)', 'black-opa-045': 'rgba(0, 0, 0, 0.45)', 'black-opa-065': 'rgba(0, 0, 0, 0.65)', } return COLORS['black-opa-045'] }

• Parece que no hay problema con el parámetro clave: traté de devolverlo como se muestra a continuación y el valor es "black-opa-025"

 getColor: function (key) { const COLORS = { 'white-opa-03': 'rgba(255, 255, 255, 0.3)', 'white-opa-04': 'rgba(255, 255, 255, 0.4)', 'black-opa-045': 'rgba(0, 0, 0, 0.45)', 'black-opa-065': 'rgba(0, 0, 0, 0.65)', } return key }

notas

• hay una razón por la que no almaceno el código de color en less es para una sola fuente de código de color, que se puede compartir con los archivos js y css.

¡Gracias por adelantado!