Vuetify，如何 style/theme 一个按钮总是 "small" 和 "tile"？

Question

如何更改按钮的默认外观，使每次创建按钮时看起来都一样？我了解如何即使用颜色主题更改即 "primary" 颜色，以及如何更改 css 即所有按钮背景颜色。

但是如果我想要：

所有按钮默认自动显示为 "small" 和 "tile"？

Answer 1

创建您自己的组件，例如就像 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 ...
})

这样做的好处在于，您从 VBtn 派生的 XBtn 组件将具有所有相同的属性和事件。 XBtn 将默认为 small 和 tile，但您仍然可以通过执行以下操作来覆盖它们：<x-btn large>。您基本上可以像使用 VBtn.

一样使用它

Vuetify，如何 style/theme 一个按钮总是 "small" 和 "tile"？

Vuetify, how to style/theme a button to always be "small" and "tile"?

themes

styles

vuetify.js