按钮

v-btn 组件用一 material design 主题和大量选项替代了标准的 html 按钮。任何颜色助手类都可以用来改变背景色或文本颜色。

用例

最简单的按钮包含大写文本、轻微的仰角、悬停效果和单击时的波纹效果。

Buttons（按钮） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Buttons（按钮） - 图2

当使用 dark 属性时，v-btn 是唯一表现不同的组件。 通常，组件使用 dark 属性来表示它们具有深色背景，并且其文本必须为白色。 虽然这对v-btn 起作用，但由于禁用状态与白色背景混合，建议仅在按钮 IS ON为彩色背景时使用属性。 如果您需要白色文本，只需添加 white—text 类。

示例

下面是一些简单到复杂的例子。

文本

文字按钮没有框影，也没有背景。只有在悬停时才会显示按钮的容器。

template

  1. <template>
  2.   <v-row align="center">
  3.     <v-col class="text-center" cols="12" sm="4">
  4.       <div class="my-2">
  5.         <v-btn text small>Normal</v-btn>
  6.       </div>
  7.       <div class="my-2">
  8.         <v-btn text small color="primary">Primary</v-btn>
  9.       </div>
  10.       <div class="my-2">
  11.         <v-btn text small color="error">Error</v-btn>
  12.       </div>
  13.       <div class="my-2">
  14.         <v-btn text small disabled>Disabled</v-btn>
  15.       </div>
  16.     </v-col>
  18.     <v-col class="text-center" cols="12" sm="4">
  19.       <div class="my-2">
  20.         <v-btn text>Normal</v-btn>
  21.       </div>
  22.       <div class="my-2">
  23.         <v-btn text color="primary">Primary</v-btn>
  24.       </div>
  25.       <div class="my-2">
  26.         <v-btn text color="error">Error</v-btn>
  27.       </div>
  28.       <div class="my-2">
  29.         <v-btn text disabled>Disabled</v-btn>
  30.       </div>
  31.     </v-col>
  33.     <v-col class="text-center" cols="12" sm="4">
  34.       <div class="my-2">
  35.         <v-btn text large>Normal</v-btn>
  36.       </div>
  37.       <div class="my-2">
  38.         <v-btn text large color="primary">Primary</v-btn>
  39.       </div>
  40.       <div class="my-2">
  41.         <v-btn text large color="error">Error</v-btn>
  42.       </div>
  43.       <div class="my-2">
  44.         <v-btn text large disabled>Disabled</v-btn>
  45.       </div>
  46.     </v-col>
  47.   </v-row>
  48. </template>

Buttons（按钮） - 图3

凸起

凸起的按钮有一个会在在点击时加重的框阴影，这是默认的样式。

template

  1. <template>
  2.   <v-row align="center">
  3.     <v-col class="text-center" cols="12" sm="4">
  4.       <div class="my-2">
  5.         <v-btn small>Normal</v-btn>
  6.       </div>
  7.       <div class="my-2">
  8.         <v-btn small color="primary">Primary</v-btn>
  9.       </div>
  10.       <div class="my-2">
  11.         <v-btn small color="error">Error</v-btn>
  12.       </div>
  13.       <div class="my-2">
  14.         <v-btn small disabled>Disabled</v-btn>
  15.       </div>
  16.     </v-col>
  17.     <v-col class="text-center" cols="12" sm="4">
  18.       <div class="my-2">
  19.         <v-btn>Normal</v-btn>
  20.       </div>
  21.       <div class="my-2">
  22.         <v-btn color="primary">Primary</v-btn>
  23.       </div>
  24.       <div class="my-2">
  25.         <v-btn color="error">Error</v-btn>
  26.       </div>
  27.       <div class="my-2">
  28.         <v-btn disabled>Disabled</v-btn>
  29.       </div>
  30.     </v-col>
  31.     <v-col class="text-center" cols="12" sm="4">
  32.       <div class="my-2">
  33.         <v-btn large>Normal</v-btn>
  34.       </div>
  35.       <div class="my-2">
  36.         <v-btn large color="primary">Primary</v-btn>
  37.       </div>
  38.       <div class="my-2">
  39.         <v-btn large color="error">Error</v-btn>
  40.       </div>
  41.       <div class="my-2">
  42.         <v-btn large disabled>Disabled</v-btn>
  43.       </div>
  44.     </v-col>
  45.   </v-row>
  46. </template>

Buttons（按钮） - 图4

凹陷

凹陷的按钮依然保持其背景色，但没有框阴影。

template

  1. <template>
  2.   <v-row align="center">
  3.     <v-col class="text-center" cols="12" sm="4">
  4.       <div class="my-2">
  5.         <v-btn depressed small>Normal</v-btn>
  6.       </div>
  7.       <div class="my-2">
  8.         <v-btn depressed small color="primary">Primary</v-btn>
  9.       </div>
  10.       <div class="my-2">
  11.         <v-btn depressed small color="error">Error</v-btn>
  12.       </div>
  13.       <div class="my-2">
  14.         <v-btn depressed small disabled>Disabled</v-btn>
  15.       </div>
  16.     </v-col>
  18.     <v-col class="text-center" cols="12" sm="4">
  19.       <div class="my-2">
  20.         <v-btn depressed>Normal</v-btn>
  21.       </div>
  22.       <div class="my-2">
  23.         <v-btn depressed color="primary">Primary</v-btn>
  24.       </div>
  25.       <div class="my-2">
  26.         <v-btn depressed color="error">Error</v-btn>
  27.       </div>
  28.       <div class="my-2">
  29.         <v-btn depressed disabled>Disabled</v-btn>
  30.       </div>
  31.     </v-col>
  33.     <v-col class="text-center" cols="12" sm="4">
  34.       <div class="my-2">
  35.         <v-btn depressed large>Normal</v-btn>
  36.       </div>
  37.       <div class="my-2">
  38.         <v-btn depressed large color="primary">Primary</v-btn>
  39.       </div>
  40.       <div class="my-2">
  41.         <v-btn depressed large color="error">Error</v-btn>
  42.       </div>
  43.       <div class="my-2">
  44.         <v-btn depressed large disabled>Disabled</v-btn>
  45.       </div>
  46.     </v-col>
  47.   </v-row>
  48. </template>

Buttons（按钮） - 图5

按钮下拉变量

按钮下拉菜单是带有额外的样式的常规选择框。

template script

  1. <template>
  2.   <v-container id="dropdown-example">
  3.     <v-row>
  4.       <v-col cols="12" sm="4">
  5.         <p>Overflow</p>
  7.         <v-overflow-btn
  8.           class="my-2"
  9.           :items="dropdown_font"
  10.           label="Overflow Btn"
  11.           target="#dropdown-example"
  12.         ></v-overflow-btn>
  13.       </v-col>
  15.       <v-col cols="12" sm="4">
  16.         <p>Segmented</p>
  18.         <v-overflow-btn
  19.           class="my-2"
  20.           :items="dropdown_icon"
  21.           label="Segmented Btn"
  22.           segmented
  23.           target="#dropdown-example"
  24.         ></v-overflow-btn>
  25.       </v-col>
  27.       <v-col cols="12" sm="4">
  28.         <p>Editable</p>
  30.         <v-overflow-btn
  31.           class="my-2"
  32.           :items="dropdown_edit"
  33.           label="Editable Btn"
  34.           editable
  35.           item-value="text"
  36.         ></v-overflow-btn>
  37.       </v-col>
  38.     </v-row>
  39.   </v-container>
  40. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
  5.       dropdown_icon: [
  6.         { text: 'list', callback: () => console.log('list') },
  7.         { text: 'favorite', callback: () => console.log('favorite') },
  8.         { text: 'delete', callback: () => console.log('delete') },
  9.       ],
  10.       dropdown_edit: [
  11.         { text: '100%' },
  12.         { text: '75%' },
  13.         { text: '50%' },
  14.         { text: '25%' },
  15.         { text: '0%' },
  16.       ],
  17.     }),
  18.   }
  19. </script>

Buttons（按钮） - 图6

图标

图标可作为按钮的主要内容。

template

  1. <template>
  2.   <v-card flat>
  3.     <v-card-text>
  4.       <v-container fluid class="pa-0">
  5.         <v-row>
  6.           <v-col cols="12">
  7.             <p>Normal</p>
  8.           </v-col>
  10.           <v-col cols="12" sm="3">
  11.             <v-btn icon color="pink">
  12.               <v-icon>mdi-heart</v-icon>
  13.             </v-btn>
  14.           </v-col>
  16.           <v-col cols="12" sm="3">
  17.             <v-btn icon color="indigo">
  18.               <v-icon>mdi-star</v-icon>
  19.             </v-btn>
  20.           </v-col>
  22.           <v-col cols="12" sm="3">
  23.             <v-btn icon color="green">
  24.               <v-icon>mdi-cached</v-icon>
  25.             </v-btn>
  26.           </v-col>
  28.           <v-col cols="12" sm="3">
  29.             <v-btn icon color="deep-orange">
  30.               <v-icon>mdi-thumb-up</v-icon>
  31.             </v-btn>
  32.           </v-col>
  33.         </v-row>
  35.         <v-row class="mt-12">
  36.           <v-col cols="12">
  37.             <p>Disabled</p>
  38.           </v-col>
  40.           <v-col cols="12" sm="3">
  41.             <v-btn icon disabled>
  42.               <v-icon>mdi-heart</v-icon>
  43.             </v-btn>
  44.           </v-col>
  46.           <v-col cols="12" sm="3">
  47.             <v-btn icon disabled>
  48.               <v-icon>mdi-star</v-icon>
  49.             </v-btn>
  50.           </v-col>
  52.           <v-col cols="12" sm="3">
  53.             <v-btn icon disabled>
  54.               <v-icon>mdi-cached</v-icon>
  55.             </v-btn>
  56.           </v-col>
  58.           <v-col cols="12" sm="3">
  59.             <v-btn icon disabled>
  60.               <v-icon>mdi-thumb-up</v-icon>
  61.             </v-btn>
  62.           </v-col>
  63.         </v-row>
  64.       </v-container>
  65.     </v-card-text>
  66.   </v-card>
  67. </template>

Buttons（按钮） - 图7

浮动

浮动按钮是圆形的，通常包含一个图标。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn class="mx-2" fab dark small color="primary">
  4.       <v-icon dark>mdi-minus</v-icon>
  5.     </v-btn>
  7.     <v-btn class="mx-2" fab dark small color="pink">
  8.       <v-icon dark>mdi-heart</v-icon>
  9.     </v-btn>
  11.     <v-btn class="mx-2" fab dark color="indigo">
  12.       <v-icon dark>mdi-plus</v-icon>
  13.     </v-btn>
  15.     <v-btn class="mx-2" fab dark color="teal">
  16.       <v-icon dark>mdi-format-list-bulleted-square</v-icon>
  17.     </v-btn>
  19.     <v-btn class="mx-2" fab dark large color="cyan">
  20.       <v-icon dark>mdi-pencil</v-icon>
  21.     </v-btn>
  23.     <v-btn class="mx-2" fab dark large color="purple">
  24.       <v-icon dark>mdi-android</v-icon>
  25.     </v-btn>
  26.   </div>
  27. </template>

Buttons（按钮） - 图8

Light Vuetify Stickers

Stick them to your car, laptop or favorite mug. They are made from a durable vinyl with a laminate that is weather-proof against rain, sun, wind and snow, and even dishwasher safe.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-light-sticker?ref=vuetifyjs.com)

大小

按钮可以被设置不同的尺寸选项以适应多种方案。

template

  1. <template>
  2.   <v-container fluid class="pa-0">
  3.     <v-row align="center">
  4.       <v-col cols="12" sm="6">
  5.         <div class="text-center">
  6.           <div class="my-2">
  7.             <v-btn x-small color="secondary" dark>Extra small Button</v-btn>
  8.           </div>
  9.           <div class="my-2">
  10.             <v-btn small color="primary" dark>Small Button</v-btn>
  11.           </div>
  12.           <div class="my-2">
  13.             <v-btn color="warning" dark>Normal Button</v-btn>
  14.           </div>
  15.           <div class="my-2">
  16.             <v-btn color="error" dark large>Large Button</v-btn>
  17.           </div>
  18.           <div class="my-2">
  19.             <v-btn x-large color="success" dark>Extra large Button</v-btn>
  20.           </div>
  21.         </div>
  22.       </v-col>
  23.       <v-col cols="12" sm="6">
  24.         <div class="text-center">
  25.           <div class="my-2">
  26.             <v-btn color="secondary" fab x-small dark>
  27.               <v-icon>mdi-television</v-icon>
  28.             </v-btn>
  29.           </div>
  30.           <div class="my-2">
  31.             <v-btn color="primary" fab small dark>
  32.               <v-icon>mdi-pencil</v-icon>
  33.             </v-btn>
  34.           </div>
  35.           <div class="my-2">
  36.             <v-btn color="warning" fab dark>
  37.               <v-icon>mdi-account-circle</v-icon>
  38.             </v-btn>
  39.           </div>
  40.           <div class="my-2">
  41.             <v-btn color="error" fab large dark>
  42.               <v-icon>mdi-alarm</v-icon>
  43.             </v-btn>
  44.           </div>
  45.           <div class="my-2">
  46.             <v-btn color="success" fab x-large dark>
  47.               <v-icon>mdi-domain</v-icon>
  48.             </v-btn>
  49.           </div>
  50.         </div>
  51.       </v-col>
  52.     </v-row>
  53.   </v-container>
  54. </template>

Buttons（按钮） - 图9

轮廓

轮廓按钮从应用的当前颜色继承其边框。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn class="ma-2" outlined color="indigo">Outlined Button</v-btn>
  4.     <v-btn class="ma-2" outlined fab color="teal">
  5.       <v-icon>mdi-format-list-bulleted-square</v-icon>
  6.     </v-btn>
  7.     <v-btn class="ma-2" outlined large fab color="indigo">
  8.       <v-icon>mdi-pencil</v-icon>
  9.     </v-btn>
  10.   </div>
  11. </template>

Buttons（按钮） - 图10

圆角

圆形按钮的行为与常规按钮相同，但具有圆形边缘。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn rounded color="primary" dark>Rounded Button</v-btn>
  4.   </div>
  5. </template>

Buttons（按钮） - 图11

平铺

平铺按钮的行为与常规按钮相同，但没有边框半径。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn class="ma-2" tile color="indigo" dark>Tile Button</v-btn>
  4.     <v-btn class="ma-2" tile outlined color="success">
  5.       <v-icon left>mdi-pencil</v-icon> Edit
  6.     </v-btn>
  7.     <v-btn class="ma-2" tile large color="teal" icon>
  8.       <v-icon>mdi-vuetify</v-icon>
  9.     </v-btn>
  10.   </div>
  11. </template>

Buttons（按钮） - 图12

块状

块状按钮可以扩展全部可用宽度

template

  1. <template>
  2.   <v-btn block color="secondary" dark>Block Button</v-btn>
  3. </template>

Buttons（按钮） - 图13

加载器

使用加载（loading）属性，你可以通知用户有正在进行的处理。默认行为是使用一个v-progress-circular组件，但可以对齐进行自定义。

template script style

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       class="ma-2"
  5.       :loading="loading"
  6.       :disabled="loading"
  7.       color="secondary"
  8.       @click="loader = 'loading'"
  9.     >
  10.       Accept Terms
  11.     </v-btn>
  13.     <v-btn
  14.       :loading="loading3"
  15.       :disabled="loading3"
  16.       color="blue-grey"
  17.       class="ma-2 white--text"
  18.       @click="loader = 'loading3'"
  19.     >
  20.       Upload
  21.       <v-icon right dark>mdi-cloud-upload</v-icon>
  22.     </v-btn>
  24.     <v-btn
  25.       class="ma-2"
  26.       :loading="loading2"
  27.       :disabled="loading2"
  28.       color="success"
  29.       @click="loader = 'loading2'"
  30.     >
  31.       Custom Loader
  32.       <template v-slot:loader>
  33.         <span>Loading...</span>
  34.       </template>
  35.     </v-btn>
  37.     <v-btn
  38.       class="ma-2"
  39.       :loading="loading4"
  40.       :disabled="loading4"
  41.       color="info"
  42.       @click="loader = 'loading4'"
  43.     >
  44.       Icon Loader
  45.       <template v-slot:loader>
  46.         <span class="custom-loader">
  47.           <v-icon light>cached</v-icon>
  48.         </span>
  49.       </template>
  50.     </v-btn>
  52.     <v-btn
  53.       :loading="loading5"
  54.       :disabled="loading5"
  55.       color="blue-grey"
  56.       class="ma-2 white--text"
  57.       fab
  58.       @click="loader = 'loading5'"
  59.     >
  60.       <v-icon dark>mdi-cloud-upload</v-icon>
  61.     </v-btn>
  62.   </div>
  63. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         loader: null,
  6.         loading: false,
  7.         loading2: false,
  8.         loading3: false,
  9.         loading4: false,
  10.         loading5: false,
  11.       }
  12.     },
  13.     watch: {
  14.       loader () {
  15.         const l = this.loader
  16.         this[l] = !this[l]
  18.         setTimeout(() => (this[l] = false), 3000)
  20.         this.loader = null
  21.       },
  22.     },
  23.   }
  24. </script>
  1. <style>
  2.   .custom-loader {
  3.     animation: loader 1s infinite;
  4.     display: flex;
  5.   }
  6.   @-moz-keyframes loader {
  7.     from {
  8.       transform: rotate(0);
  9.     }
  10.     to {
  11.       transform: rotate(360deg);
  12.     }
  13.   }
  14.   @-webkit-keyframes loader {
  15.     from {
  16.       transform: rotate(0);
  17.     }
  18.     to {
  19.       transform: rotate(360deg);
  20.     }
  21.   }
  22.   @-o-keyframes loader {
  23.     from {
  24.       transform: rotate(0);
  25.     }
  26.     to {
  27.       transform: rotate(360deg);
  28.     }
  29.   }
  30.   @keyframes loader {
  31.     from {
  32.       transform: rotate(0);
  33.     }
  34.     to {
  35.       transform: rotate(360deg);
  36.     }
  37.   }
  38. </style>

Buttons（按钮） - 图14