Динамическое изменение цвета панели инструментов в Vuetify - PullRequest
Новая
       25

Динамическое изменение цвета панели инструментов в Vuetify

0 голосов
/ 29 марта 2019

Я хочу динамически изменить цвет панели инструментов в Vuetify (обратите внимание, я знаю, что на этом сайте есть похожие сообщения, но ни одна из них не использует Vue)

Я использовал v-bind:style для этого, но это не работает! Это мой шаблон и соответствующий ему скрипт: 

<v-toolbar
  flat
  fixed
  app
  v-bind:style="{ color: dynamic }"
  light
  scroll-off-screen
>

...

data: () => ({
 dynamic: 'black'
})

1 Ответ

1 голос
/ 29 марта 2019

v-toolbar имеет свойство color, которое контролирует его цвет фона.Вы можете привязать dynamic к этому свойству вместо привязки стиля: 

<v-toolbar :color="dynamic" ...>


new Vue({
  el: '#app',
  data: () => ({
    dynamic: 'black'
  })
})
<script src="https://unpkg.com/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">

<div id="app">
  <v-app id="inspire">
    <v-toolbar dark :color="dynamic">
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>Link One</v-btn>
        <v-btn flat>Link Two</v-btn>
        <v-btn flat>Link Three</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>
...