第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何將 Vuetify 的材料設(shè)計(jì)顏色名稱轉(zhuǎn)換為 Vue 組件中的十六進(jìn)制值？

如何將 Vuetify 的材料設(shè)計(jì)顏色名稱轉(zhuǎn)換為 Vue 組件中的十六進(jìn)制值？

富國(guó)滬深 2023-02-17 16:40:26
我想在我的 Vue 組件模板中獲取Vuetify 材料設(shè)計(jì)顏色作為十六進(jìn)制值，這樣我就可以在下面執(zhí)行類似這樣的操作來(lái)獲取字符串#FFD54F：<div :style="`border: 5px solid ${ myHexadecimalColor('amber lighten-2') }`"></div>我閱讀了 Vuetify 文檔的SASS 變量和顏色部分，但無(wú)法確定解決方案。我可以看到Vuetify 的 github repo @中定義的顏色vuetify/packages/vuetify/src/styles/settings/_colors.scss，但我不知道如何在我的 Vue 單文件組件中訪問(wèn)這些 Sass 變量。有誰(shuí)知道將 Vuetify 材料設(shè)計(jì)顏色名稱轉(zhuǎn)換為十六進(jìn)制值的最佳方法？獎(jiǎng)金：根據(jù) Boussadjra Brahim 的回答，我寫了一個(gè)快速的顏色名稱到十六進(jìn)制的方法來(lái)放入 Vue 混合，并將其包含在下面以防對(duì)任何人有幫助。示例：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]  }}
查看完整描述

2 回答

?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

將顏色導(dǎo)入您的組件，然后使用它的修飾符訪問(wèn)顏色，例如：



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


....


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


查看完整回答
反對(duì) 回復(fù) 2023-02-17
?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

success因此，雖然接受的答案是正確的，但我認(rèn)為更完整的功能還包括翻譯主題顏色（例如, error）及其陰影（例如）的能力success darken-2，以及在顏色已經(jīng)通過(guò)時(shí)處理輸入十六進(jìn)制、RGB 或 RGBA。


這是我在 mixin 中實(shí)現(xiàn)的一個(gè)函數(shù)，它執(zhí)行以下操作：


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;

    }

}

現(xiàn)在我確定我的方法可以優(yōu)化，但一般的想法是它能夠從包含的 Material Design 顏色和主題的顏色中讀取。


查看完整回答
反對(duì) 回復(fù) 2023-02-17
  • 2 回答
  • 0 關(guān)注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)