Vuetify, как стиль / тема кнопки, чтобы всегда быть "маленьким" и "плиткой"? - PullRequest
Новая
       51

Vuetify, как стиль / тема кнопки, чтобы всегда быть "маленьким" и "плиткой"?

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

Как изменить внешний вид кнопки по умолчанию, чтобы при каждом создании кнопки она выглядела одинаково? Я понимаю, как, например, использовать цветовую тему, чтобы изменить то есть «основной» цвет, и как изменить css для всех цветов фона кнопки.

Но как бы я go о, если бы я для пример хотите:

Все кнопки автоматически отображаются как «маленькие» и «плитки» по умолчанию?

1 Ответ

1 голос
/ 26 апреля 2020

Создайте свой собственный компонент, например, такой как src/components/XBtn.vue: 

<template>
  <v-btn
    v-bind="$props"
    small
    tile
    v-on="$listeners"
  >
    <slot></slot>
  </v-btn>
</template>

<script>
  import VBtn from 'vuetify/lib/components/VBtn/'
  export default {
    name: 'XBtn',
    props: VBtn.options.props,
  }
</script>

Затем в другом месте вашего приложения вы можете импортировать его: 

<template>
  <v-row>
    <x-btn color="primary">Save</x-btn>
  </v-row>
</template>

<script>
  import XBtn from '@/components/XBtn'
  export default {
    name: 'SomeOtherComponent',
    components: {
      XBtn,
    },
  }
</script>

Или, если хотите чтобы он был доступен глобально, без необходимости каждый раз импортировать его, вы можете зарегистрировать его в src/main.js следующим образом: 

// ... other imports ...
import XBtn from '@/components/XBtn'

Vue.component('x-btn', XBtn)

new Vue({
  // ... main Vue instance config ...
})

Крутая вещь в том, чтобы делать это таким образом, это то, что компонент XBtn, который вы получаете из VBtn будет иметь ВСЕ одинаковые свойства и события. XBtn по умолчанию будет small и tile, но вы все равно можете переопределить их, выполнив что-то вроде: <x-btn large>. Вы в основном используете его точно так же, как вы используете VBtn.

...