Javascript 如何翻译Vuetify'；在Vue组件中将材质设计颜色名称转换为十六进制值？

我希望在Vue组件的模板中获取一个十六进制值，这样我就可以执行下面的操作来获取字符串

#FFD54F

：

我阅读了Vuetify文档和章节，但我无法从中确定解决方案

我可以看到@

vuetify/packages/vuetify/src/style/settings/_colors.scss

，但我不知道如何在我的Vue单文件组件中访问这些Sass变量

有人知道将Vuetify材质设计颜色名称转换为十六进制值的最佳方法吗

---

奖金：

根据Boussadjra Brahim的回答，我写了一个快速的颜色名称到十六进制方法，以放入Vue混合，并将其包含在下面，以防对任何人都有帮助

示例：

hexColor（'amber lighted-2'）

返回

#FFD54F

从“vuetify/lib/util/colors”导入颜色
...
方法：{
hexColor:（名称）=>{
常量[nameFamily，nameModifier]=name.split（“”）
常量阴影=[‘黑色’、‘白色’、‘透明’]
const util={family:null，修饰符：null}
if（shades.find（shades=>shades==nameFamily））{
util.family='shades'
util.modifier=nameFamily
}否则{
const[firstWord，secondWord]=nameFamily.split（'-'））
util.family=`${firstWord}${secondWord
？secondWord.charAt（0.toUpperCase（）+secondWord.slice（1）
: '' }`
util.modifier=nameModifier
？名称修改器。替换（'-'，''）
：“基地”
}
返回颜色[util.family][util.modifier]
}
}

将颜色导入组件，然后使用颜色修改器访问颜色，如：

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

....

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

从“vuetify/lib/util/colors”导入颜色
....

因此，虽然公认的答案是正确的，但我认为更完整的功能还包括翻译主题颜色（如

成功

，

错误

）及其阴影（如

成功变暗-2

），以及在颜色已作为十六进制、rgb或rgba传递时处理输入

下面是我在mixin中实现的一个函数，它可以实现以下功能：

从“vuetify/lib/util/colors”导入颜色；
...
方法：{
翻译颜色（颜色）{
if（'string'！==typeof color | | color.trim（）.length==0）{
返回颜色；
}
if（color.startsWith（“#”）| | color.startsWith（'rgb'））{
返回颜色；
}
const themeColors=Object.keys（这是$vuetify.theme.currentTheme）；
常数themeColorIndex=颜色索引of（颜色）；
如果（主题颜色指数>-1）{
返回此.vuetify.theme.currentTheme[color]；
}
让基色；
让阴凉；
if（颜色包括（“”））{
常量[bc，s]=颜色分割（“”）；
baseColor=bc；
阴影=s；
}
否则{
基色=颜色；
阴影='基础'；
}
const generalColors=对象键（颜色）；
常量generalColorsIndex=generalColors.indexOf（基色）；
常数themeColorsShadeIndex=themeColors.indexOf（基色）；
如果（通用颜色索引>-1）{
const fixedShade=shade.toLowerCase（）.replace（'-'，''）；
const co=颜色[通用颜色[通用颜色索引]；
返回co[fixedShade]；
}
else if（颜色阴影索引>-1）{
const fixedShade=shade.toLowerCase（）.replace（'-'，''）；
const co=this.$vuetify.theme.parsedTheme[themeColors[themeColorsShadeIndex]]
返回co[fixedShade]；
}
返回颜色；
}
}

现在我确信我的方法可以被优化，但总的想法是它能够从包含的材料设计颜色和主题颜色中读取