стилизация активных ссылок в Vue с использованием Bulma - PullRequest
Новая
       29

стилизация активных ссылок в Vue с использованием Bulma

0 голосов
/ 20 апреля 2020

Для навигации по странице в приложении VueJS используются следующие кнопки: 

<div class="box button title" @click="updateMenu()" :class="componentName == 'central' ? 'is-primary' : ''"><router-link to="/home/central">Central</router-link></div>
<div class="box button title" @click="updateMenu()" :class="componentName == 'validation' ? 'is-primary' : ''"><router-link to="/home/validation">Validation</router-link></div>
<div class="box button title" @click="updateMenu()" :class="componentName == 'list' ? 'is-primary' : ''"><router-link to="/home/production">List</router-link></div>

Ниже приведен фрагмент настройки для маршрутизатора: 

export default new VueRouter({
  routes,
  linkActiveClass: "active",      // active class for non-exact links
  linkExactActiveClass: "active"  // active class for exact links
});

Bulma - это платформа CSS, используемая в этом проекте, и переменные, связанные со стилями ссылок, устанавливаются следующим образом в файле с именем index.s css: 

$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
$link-active: $white;

Вот текущее поведение, использующее этот код:

  • при нажатии кнопки цвет фона кнопки меняется на настройку цвета для "is-primary" (это хорошо)
  • текст в кнопке остается "is-primary" цвет (это плохо) - ожидается, что он изменится на белый

Почему $link-active: $white; не изменяет текст по нажатой ссылке на белый?

Как тест, когда он добавляется на ту же страницу, что и кнопки навигации, тогда текст ссылки активной кнопки становится белым: 

<style scoped>
.active {
    color: white;
}
</style>

Вышеприведенный тест не подходит для производственного кода - исправление для это должно быть где-то в настройках переменных Bulma. Но где / как, это вопрос.

1 Ответ

0 голосов
/ 21 апреля 2020

Это, вероятно, SASS / S CSS область видимости.

Ссылка на IVO: Vue. js 2: стиль Scoped не работает с sass / s css

это либо go /deep/, либо ::v-deep в вашем стиле.

...