Как удалить выделение страницы на кнопке?

Question

Такая проблема, использую vue и vuetify. И btn кнопка горит если открыта страница на которую повешена кнопка, т.е. у меня стоит to="/" и на главной горит кнопка. И как это исправить?

Код:

<v-btn text to="/">
      <v-img
          alt="Logo"
          class="shrink mr-2 logo"
          contain
          src="/logo.jpg"
          transition="scale-transition"
          width="40"
      />
      <h4 class="hidden-sm-and-down">DreamBot</h4>
      </v-btn>

Answer 1

что бы выделения не было видно (если оно совсем не нужно), можно сделать так:

*:focus {
  outline: none;
}

Answer 2

Добавьте к кнопкам у которых хотите убрать подсвечивание класс no-active, как:

<v-btn text to="/" class="no-active">...</v-btn>

и добавьте стили для этого класса:

.v-btn--active.no-active::before {
  opacity: 0 !important;
}

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

const testcomponent = Vue.component("testcomponent", {
  template: `<pre>fullPath = {{ $route.fullPath }}</pre>`,
});

const router = new VueRouter({
  routes: [{
      path: "/",
      component: testcomponent,
      name: 'home'
    },
    {
      path: "/list",
      component: testcomponent,
      name: 'list'
    },
  ],
});

new Vue({
  el: "#app",
  router,
  vuetify: new Vuetify({
    theme: {
      dark: true
    },
  }),
});

.v-btn--active.no-active::before {
  opacity: 0 !important;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-app-bar app>
        <v-btn text to="/" class="no-active">
          <v-img alt="Logo" class="shrink mr-2 logo" contain src="/logo.jpg" transition="scale-transition" />
          <h4>DreamBot</h4>
        </v-btn>

        <v-btn text to="/list">
          <h4>Список команд</h4>
        </v-btn>
      </v-app-bar>
      <v-main>

        <v-container fluid>
          <router-view></router-view>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как удалить выделение страницы на кнопке?

Ответы (2 шт):