Использование Vue данных для хранения элемента CSS - PullRequest
Новая
       5

Использование Vue данных для хранения элемента CSS

0 голосов
/ 22 января 2020

Я использую Quasar Framework вместе с vue для разработки приложений.

Вот мой код: 

<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Save </q-tooltip>
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Open </q-tooltip>
<q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"> Exit </q-tooltip>

В принципе, мне интересно, есть ли способ для меня сохраните bg-amber в параметре, чтобы в случае, если я захочу изменить этот класс (цвет) в будущем, мне нужно только изменить значение параметра, а не изменять все это.

Что-то вроде этого : 

export default {
  data () {
    return {
      tooltipColor: 'bg-amber'
    }
  }
}

Но если я сделаю это, как я смогу получить доступ к этому на стороне html?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 22 января 2020

Я думаю, что вы должны использовать встроенный стиль, как этот. 

<h1 :style="`background-color: ${myColor}`">Hello, Vue!</h1>

export default {
  data () {
    return {
      myColor: 'red'
    }
  }
}

Пример кода

2 голосов
/ 22 января 2020

Вы можете сделать это следующим образом. 

<q-tooltip :content-class="[tooltipColor, 'text-black' ,'shadow-4']" :offset="[10, 10]"> Save </q-tooltip>
1 голос
/ 22 января 2020

Вы можете передавать любые атрибуты с помощью директивы v-bind. (Использование : перед тем, как атрибут является сокращением для v-bind. Когда вы делаете v-bind, вам нужно передать выражение JavaScript. (Так же, как вы делаете в атрибуте :offset) 

<q-tooltip :content-class="contentClass" :offset="[10, 10]"> Exit </q-tooltip>

    computed: {
        contentClass() {
             return `${this.tooltipColor} text-black shadow-4`;
        }
    }
...