Подтвердить что ты не робот

Использование пользовательских тезисов в Vuetify и передача цветовых переменных в компоненты

В моем файле index.js я вручную переопределяю объект theme Vuetify с цветом моей компании:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

Теперь я могу использовать эти цвета из своих шаблонов:

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

То, что мне нужно, использует primary или любую другую переменную в объекте theme определенном выше, внутри моего стиля шаблона:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

Я могу просто просто написать шестнадцатеричное значение моих цветов в разделе стиля, но я не хочу повторять себя и предпочитаю использовать свой объект theme поэтому мне будет легче легко менять цвета везде и избегать опечатки, которые приведут к ошибкам в определениях цветов.

4b9b3361

ОТВЕТЫ

Ответ 1

Редактировать (2018/10/11)

Начиная с версии 1.2. мы можем включить переменные CSS
ПРИМЕЧАНИЕ: якобы он не будет работать в IE (Edge должен работать) и, возможно, в некоторых версиях Safari?

Из документов (см. пользовательские свойства)

Включение customProperties также будет генерировать переменную CSS для каждого цвет темы, который затем можно использовать в компонентах блоки.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

Для пользовательских значений, например
yourcustomvariablename: '#607D8B'
используйте --v-yourcustomvariablename-base (поэтому base используется по умолчанию).

Оригинальный ответ:

На github есть Feature Request: доступ к цветам темы в файлах стилуса

@KaelWD (один из разработчиков) написал:

Это то, что вы должны реализовать самостоятельно. Я пытался сделать что-то подобное раньше, но это не очень работает на платформе уровень.

Проблема помечена wontfix

Изменить (2018/10/11)
Также смотрите эту обновленную тему:
https://github.com/vuetifyjs/vuetify/issues/827  (Запрос функции: собственные переменные CSS)

Ответ 2

Существует способ обойти это, используя атрибуты :style. Он может использоваться для принудительного задания пользовательских свойств CSS.

Добавить вычисленное свойство:

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

Стиль привязки к cssProps:

<div id="app" :style="cssProps">

Тогда, в вашем стиле:

<style scoped>
    label
        color: var(--secondary-color);
</style>

Адаптировано из этого обсуждения: https://github.com/vuejs/vue/issues/7346

Ответ 3

Любой, кто сталкивается с этой проблемой начиная с Vuetify V2, может сделать следующее, чтобы получить доступ к цветовым переменным SCSS.

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

Все цвета можно найти в /node_modules/vuetify/styles/settings/_colors.scss.