Vuetify，如何将按钮的样式化，使其永远是 "小 "和 "瓦"？

Question

如何改变按钮的默认外观，使我每次创建按钮时都是一样的？我知道如何使用颜色主题来改变即 "主色"，以及如何改变即所有按钮背景颜色的css。

但是，如果我想让所有的按钮自动显示为 "小 "的颜色，我该怎么做呢？

所有按钮都自动显示为 "小 "和 "平铺"？

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 ...
})

这样做的好处是： XBtn 衍生出的组件 VBtn 将拥有所有相同的属性和事件。XBtn 将默认为 small 和 tile 但你仍然可以通过做一些事情来覆盖这些。<x-btn large>. 基本上，你使用它的方式和使用 VBtn.