如何将 Vuetify 的材料设计颜色名称转换为 Vue 组件中的十六进制值？

Question

我想在我的 Vue 组件模板中获取Vuetify 材料设计颜色作为十六进制值，这样我就可以在下面执行类似这样的操作来获取字符串#FFD54F：<div :style="`border: 5px solid ${ myHexadecimalColor('amber lighten-2') }`"></div>我阅读了 Vuetify 文档的SASS 变量和颜色部分，但无法确定解决方案。我可以看到Vuetify 的 github repo @中定义的颜色vuetify/packages/vuetify/src/styles/settings/_colors.scss，但我不知道如何在我的 Vue 单文件组件中访问这些 Sass 变量。有谁知道将 Vuetify 材料设计颜色名称转换为十六进制值的最佳方法？奖金：根据 Boussadjra Brahim 的回答，我写了一个快速的颜色名称到十六进制的方法来放入 Vue 混合，并将其包含在下面以防对任何人有帮助。示例：hexColor('amber lighten-2')退货#FFD54Fimport colors from 'vuetify/lib/util/colors'...methods: {  hexColor: (name) => {    const [nameFamily, nameModifier] = name.split(' ')    const shades = ['black', 'white', 'transparent']    const util = {family: null, modifier: null}    if (shades.find(shade => shade === nameFamily)){      util.family = 'shades'      util.modifier = nameFamily    } else {      const [firstWord, secondWord] = nameFamily.split('-')      util.family = `${ firstWord }${ secondWord        ? secondWord.charAt(0).toUpperCase() + secondWord.slice(1)        : '' }`      util.modifier = nameModifier         ? nameModifier.replace('-', '')         : 'base'    }    return colors[util.family][util.modifier]  }}

Answer 1

将颜色导入您的组件，然后使用它的修饰符访问颜色，例如：

import colors from 'vuetify/lib/util/colors'

....

<div :style="`border: 5px solid ${ colors['amber']['lighten2'] }`"></div>

Answer 2

success因此，虽然接受的答案是正确的，但我认为更完整的功能还包括翻译主题颜色（例如, error）及其阴影（例如）的能力success darken-2，以及在颜色已经通过时处理输入十六进制、RGB 或 RGBA。

这是我在 mixin 中实现的一个函数，它执行以下操作：

import colors from 'vuetify/lib/util/colors';

...

methods: {

    translateColor(color) {

        if ('string' !== typeof color || color.trim().length == 0) {

            return color;

        }

        if (color.startsWith('#') || color.startsWith('rgb')) {

            return color;

        }

        const themeColors = Object.keys(this.$vuetify.theme.currentTheme);

        const themeColorIndex = themeColors.indexOf(color);

        if (themeColorIndex > -1) {

            return this.$vuetify.theme.currentTheme[color];

        }

        let baseColor;

        let shade;

        if (color.includes(' ')) {

            const [bc, s] = color.split(' ');

            baseColor = bc;

            shade = s;

        }

        else {

            baseColor = color;

            shade = 'base';

        }

        const generalColors = Object.keys(colors);

        const generalColorsIndex = generalColors.indexOf(baseColor);

        const themeColorsShadeIndex = themeColors.indexOf(baseColor);

        if (generalColorsIndex > -1) {

            const fixedShade = shade.toLowerCase().replace('-', '');

            const co = colors[generalColors[generalColorsIndex]];

            return co[fixedShade];

        }

        else if (themeColorsShadeIndex > -1) {

            const fixedShade = shade.toLowerCase().replace('-', '');

            const co = this.$vuetify.theme.parsedTheme[themeColors[themeColorsShadeIndex]]

            return co[fixedShade];

        }

        return color;

    }

}

现在我确定我的方法可以优化，但一般的想法是它能够从包含的 Material Design 颜色和主题的颜色中读取。