按钮组

v-btn-toggle 组件是专门针对 v-btn 构建的 v-item-group 的简单包装器。

用例

切换按钮允许您创建一个样式化的按钮组，可以在单个 v-model 下选择或切换

template script

  1. <template>
  3.   <v-container fluid>
  4.     <v-row>
  5.       <v-col
  6.         cols="12"
  7.         sm="6"
  8.         class="py-2"
  9.       >
  10.         <p>Exclusive</p>
  12.         <v-btn-toggle v-model="toggle_exclusive">
  13.           <v-btn>
  14.             <v-icon>mdi-format-align-left</v-icon>
  15.           </v-btn>
  17.           <v-btn>
  18.             <v-icon>mdi-format-align-center</v-icon>
  19.           </v-btn>
  21.           <v-btn>
  22.             <v-icon>mdi-format-align-right</v-icon>
  23.           </v-btn>
  25.           <v-btn>
  26.             <v-icon>mdi-format-align-justify</v-icon>
  27.           </v-btn>
  28.         </v-btn-toggle>
  29.       </v-col>
  31.       <v-col
  32.         cols="12"
  33.         sm="6"
  34.         class="py-2"
  35.       >
  36.         <p>Multiple</p>
  38.         <v-btn-toggle
  39.           v-model="toggle_multiple"
  40.           dense
  41.           background-color="primary"
  42.           dark
  43.           multiple
  44.         >
  45.           <v-btn>
  46.             <v-icon>mdi-format-bold</v-icon>
  47.           </v-btn>
  49.           <v-btn>
  50.             <v-icon>mdi-format-italic</v-icon>
  51.           </v-btn>
  53.           <v-btn>
  54.             <v-icon>mdi-format-underline</v-icon>
  55.           </v-btn>
  57.           <v-btn>
  58.             <v-icon>mdi-format-color-fill</v-icon>
  59.           </v-btn>
  60.         </v-btn-toggle>
  61.       </v-col>
  63.       <v-col
  64.         cols="12"
  65.         sm="6"
  66.         class="py-2"
  67.       >
  68.         <p>No Options Selected</p>
  70.         <v-btn-toggle v-model="toggle_none">
  71.           <v-btn>
  72.             <v-icon>mdi-format-align-left</v-icon>
  73.           </v-btn>
  75.           <v-btn>
  76.             <v-icon>mdi-format-align-center</v-icon>
  77.           </v-btn>
  78.           <v-btn>
  80.             <v-icon>mdi-format-align-right</v-icon>
  81.           </v-btn>
  83.           <v-btn>
  84.             <v-icon>mdi-format-align-justify</v-icon>
  85.           </v-btn>
  86.         </v-btn-toggle>
  87.       </v-col>
  89.       <v-col
  90.         cols="12"
  91.         sm="6"
  92.         class="py-2"
  93.       >
  94.         <p>Mandatory</p>
  96.         <v-btn-toggle
  97.           v-model="toggle_one"
  98.           shaped
  99.           mandatory
  100.         >
  101.           <v-btn>
  102.             <v-icon>mdi-format-align-left</v-icon>
  103.           </v-btn>
  105.           <v-btn>
  106.             <v-icon>mdi-format-align-center</v-icon>
  107.           </v-btn>
  109.           <v-btn>
  110.             <v-icon>mdi-format-align-right</v-icon>
  111.           </v-btn>
  113.           <v-btn>
  114.             <v-icon>mdi-format-align-justify</v-icon>
  115.           </v-btn>
  116.         </v-btn-toggle>
  117.       </v-col>
  119.       <v-col
  120.         cols="12"
  121.         sm="6"
  122.         class="py-2"
  123.       >
  124.         <p>Text Options</p>
  126.         <v-btn-toggle
  127.           v-model="text"
  128.           tile
  129.           color="deep-purple accent-3"
  130.           group
  131.         >
  132.           <v-btn value="left">
  133.             Left
  134.           </v-btn>
  136.           <v-btn value="center">
  137.             Center
  138.           </v-btn>
  140.           <v-btn value="right">
  141.             Right
  142.           </v-btn>
  144.           <v-btn value="justify">
  145.             Justify
  146.           </v-btn>
  147.         </v-btn-toggle>
  148.       </v-col>
  150.       <v-col
  151.         cols="12"
  152.         sm="6"
  153.         class="py-2"
  154.       >
  155.         <p>Text &amp; Icon Options</p>
  157.         <v-btn-toggle
  158.           v-model="icon"
  159.           borderless
  160.         >
  161.           <v-btn value="left">
  162.             <span class="hidden-sm-and-down">Left</span>
  164.             <v-icon right>mdi-format-align-left</v-icon>
  165.           </v-btn>
  167.           <v-btn value="center">
  168.             <span class="hidden-sm-and-down">Center</span>
  170.             <v-icon right>mdi-format-align-center</v-icon>
  171.           </v-btn>
  173.           <v-btn value="right">
  174.             <span class="hidden-sm-and-down">Right</span>
  176.             <v-icon right>mdi-format-align-right</v-icon>
  177.           </v-btn>
  179.           <v-btn value="justify">
  180.             <span class="hidden-sm-and-down">Justify</span>
  182.             <v-icon right>mdi-format-align-justify</v-icon>
  183.           </v-btn>
  184.         </v-btn-toggle>
  185.       </v-col>
  186.     </v-row>
  187.   </v-container>
  188. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         text: 'center',
  6.         icon: 'justify',
  7.         toggle_none: null,
  8.         toggle_one: 0,
  9.         toggle_exclusive: 2,
  10.         toggle_multiple: [0, 1, 2],
  11.       }
  12.     },
  13.   }
  14. </script>

Button groups（按钮组） - 图1

API

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

Button groups（按钮组） - 图2

示例

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

圆角按钮

你能够使用 rounded 属性让 VBtnToggle 变成圆角。

template script

  1. <template>
  2.   <v-card
  3.     flat
  4.     class="py-12"
  5.   >
  6.     <v-card-text>
  7.       <v-row
  8.         align="center"
  9.         justify="center"
  10.       >
  11.         <v-col cols="12">
  12.           <p class="text-center">Rounded</p>
  13.         </v-col>
  14.         <v-btn-toggle
  15.           v-model="toggle_exclusive"
  16.           rounded
  17.         >
  18.           <v-btn>
  19.             <v-icon>mdi-format-align-left</v-icon>
  20.           </v-btn>
  21.           <v-btn>
  22.             <v-icon>mdi-format-align-center</v-icon>
  23.           </v-btn>
  24.           <v-btn>
  25.             <v-icon>mdi-format-align-right</v-icon>
  26.           </v-btn>
  27.           <v-btn>
  28.             <v-icon>mdi-format-align-justify</v-icon>
  29.           </v-btn>
  30.         </v-btn-toggle>
  31.       </v-row>
  32.     </v-card-text>
  33.   </v-card>
  34. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         toggle_exclusive: undefined,
  6.       }
  7.     },
  8.   }
  9. </script>

Button groups（按钮组） - 图3

必填项

mandatory VBtnToggle 总是要有值

template script

  1. <template>
  2.   <v-card
  3.     flat
  4.     class="py-12"
  5.   >
  6.     <v-card-text>
  7.       <v-row
  8.         align="center"
  9.         justify="center"
  10.       >
  11.         <v-col cols="12">
  12.           <p class="text-center">Mandatory</p>
  13.         </v-col>
  14.         <v-btn-toggle
  15.           v-model="toggle_exclusive"
  16.           mandatory
  17.         >
  18.           <v-btn>
  19.             <v-icon>mdi-format-align-left</v-icon>
  20.           </v-btn>
  21.           <v-btn>
  22.             <v-icon>mdi-format-align-center</v-icon>
  23.           </v-btn>
  24.           <v-btn>
  25.             <v-icon>mdi-format-align-right</v-icon>
  26.           </v-btn>
  27.           <v-btn>
  28.             <v-icon>mdi-format-align-justify</v-icon>
  29.           </v-btn>
  30.         </v-btn-toggle>
  31.       </v-row>
  32.     </v-card-text>
  33.   </v-card>
  34. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         toggle_exclusive: undefined,
  6.       }
  7.     },
  8.   }
  9. </script>

Button groups（按钮组） - 图4

多选

multiple VBtnToggle 允许用户选择多个变量并返回数组值。

template script

  1. <template>
  2.   <v-card
  3.     flat
  4.     class="py-12"
  5.   >
  6.     <v-card-text>
  7.       <v-row
  8.         align="center"
  9.         justify="center"
  10.       >
  11.         <v-col cols="12">
  12.           <p class="text-center">Multiple</p>
  13.         </v-col>
  14.         <v-btn-toggle
  15.           v-model="toggle_exclusive"
  16.           multiple
  17.         >
  18.           <v-btn>
  19.             <v-icon>mdi-format-align-left</v-icon>
  20.           </v-btn>
  21.           <v-btn>
  22.             <v-icon>mdi-format-align-center</v-icon>
  23.           </v-btn>
  24.           <v-btn>
  25.             <v-icon>mdi-format-align-right</v-icon>
  26.           </v-btn>
  27.           <v-btn>
  28.             <v-icon>mdi-format-align-justify</v-icon>
  29.           </v-btn>
  30.         </v-btn-toggle>
  32.         <v-col
  33.           cols="12"
  34.           class="text-center"
  35.         >
  36.           Model: {{ toggle_exclusive }}
  37.         </v-col>
  38.       </v-row>
  39.     </v-card-text>
  40.   </v-card>
  41. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         toggle_exclusive: [],
  6.       }
  7.     },
  8.   }
  9. </script>

Button groups（按钮组） - 图5

Alpha Theme

Complete theme experience including enhanced Vue CLI, full documentation, 5 custom components and much more!

ads by Vuetify

](https://store.vuetifyjs.com/product/alpha-theme?ref=vuetifyjs.com)

在工具栏中

与 v-toolbar 轻松集成自定义按钮

template script

  1. <template>
  2.   <v-toolbar dense>
  3.     <v-overflow-btn
  4.       :items="dropdown_font"
  5.       label="Select font"
  6.       hide-details
  7.       class="pa-0"
  8.     ></v-overflow-btn>
  10.     <template v-if="$vuetify.breakpoint.mdAndUp">
  11.       <v-divider vertical></v-divider>
  13.       <v-overflow-btn
  14.         :items="dropdown_edit"
  15.         editable
  16.         label="Select size"
  17.         hide-details
  18.         class="pa-0"
  19.         overflow
  20.       ></v-overflow-btn>
  22.       <v-divider vertical></v-divider>
  24.       <v-spacer></v-spacer>
  26.       <v-btn-toggle
  27.         v-model="toggle_multiple"
  28.         color="primary"
  29.         dense
  30.         group
  31.         multiple
  32.       >
  33.         <v-btn :value="1" text>
  34.           <v-icon>mdi-format-bold</v-icon>
  35.         </v-btn>
  37.         <v-btn :value="2" text>
  38.           <v-icon>mdi-format-italic</v-icon>
  39.         </v-btn>
  41.         <v-btn :value="3" text>
  42.           <v-icon>mdi-format-underline</v-icon>
  43.         </v-btn>
  45.         <v-btn :value="4" text>
  46.           <v-icon>mdi-format-color-fill</v-icon>
  47.         </v-btn>
  48.       </v-btn-toggle>
  50.       <div class="mx-4"></div>
  52.       <v-btn-toggle
  53.         v-model="toggle_exclusive"
  54.         color="primary"
  55.         dense
  56.         group
  57.       >
  58.         <v-btn :value="1" text>
  59.           <v-icon>mdi-format-align-left</v-icon>
  60.         </v-btn>
  62.         <v-btn :value="2" text>
  63.           <v-icon>mdi-format-align-center</v-icon>
  64.         </v-btn>
  66.         <v-btn :value="3" text>
  67.           <v-icon>mdi-format-align-right</v-icon>
  68.         </v-btn>
  70.         <v-btn :value="4" text>
  71.           <v-icon>mdi-format-align-justify</v-icon>
  72.         </v-btn>
  73.       </v-btn-toggle>
  74.     </template>
  75.   </v-toolbar>
  76. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         dropdown_font: [
  6.           { text: 'Arial' },
  7.           { text: 'Calibri' },
  8.           { text: 'Courier' },
  9.           { text: 'Verdana' },
  10.         ],
  11.         dropdown_edit: [
  12.           { text: '100%' },
  13.           { text: '75%' },
  14.           { text: '50%' },
  15.           { text: '25%' },
  16.           { text: '0%' },
  17.         ],
  18.         toggle_exclusive: 2,
  19.         toggle_multiple: [1, 2, 3],
  20.       }
  21.     },
  22.   }
  23. </script>

Button groups（按钮组） - 图6

选中的操作

对类似的操作进行分组，并设计自己的 WYSIWYG 组件。

template script

  1. <template>
  2.   <v-card
  3.     max-width="400"
  4.     class="mx-auto"
  5.   >
  6.     <v-textarea
  7.       v-model="value"
  8.       auto-grow
  9.       full-width
  10.       rows="2"
  11.     ></v-textarea>
  13.     <v-row
  14.       class="px-2 pb-2 ma-0"
  15.       justify="space-between"
  16.     >
  17.       <v-btn-toggle
  18.         v-model="formatting"
  19.         multiple
  20.       >
  21.         <v-btn color="white">
  22.           <v-icon>mdi-format-italic</v-icon>
  23.         </v-btn>
  25.         <v-btn color="white">
  26.           <v-icon>mdi-format-bold</v-icon>
  27.         </v-btn>
  29.         <v-btn color="white">
  30.           <v-icon>mdi-format-underline</v-icon>
  31.         </v-btn>
  33.         <v-btn color="white">
  34.           <v-row
  35.             align="center"
  36.             class="flex-column"
  37.             justify="center"
  38.           >
  39.             <v-icon class="cols 12">mdi-format-color-text</v-icon>
  41.             <v-sheet
  42.               tile
  43.               style="margin-top: -4px;"
  44.               height="4"
  45.               width="26"
  46.               color="purple"
  47.             ></v-sheet>
  48.           </v-row>
  49.         </v-btn>
  50.       </v-btn-toggle>
  52.       <v-btn-toggle v-model="alignment">
  53.         <v-btn color="white">
  54.           <v-icon>mdi-format-align-center</v-icon>
  55.         </v-btn>
  57.         <v-btn color="white">
  58.           <v-icon>mdi-format-align-left</v-icon>
  59.         </v-btn>
  61.         <v-btn color="white">
  62.           <v-icon>mdi-format-align-right</v-icon>
  63.         </v-btn>
  64.       </v-btn-toggle>
  65.     </v-row>
  67.     <v-sheet
  68.       class="pa-4 text-center"
  69.       color="grey lighten-3"
  70.       tile
  71.     >
  72.       <v-row
  73.         class="mb-2"
  74.         dense
  75.       >
  76.         <v-col
  77.           v-for="n in numbers"
  78.           :key="n"
  79.           class="caption grey--text text--darken-1"
  80.           v-text="n"
  81.         ></v-col>
  82.       </v-row>
  84.       <v-row dense>
  85.         <v-col
  86.           v-for="l in letters"
  87.           :key="l"
  88.           class="title grey--text font-weight-regular text--darken-2"
  89.           v-text="l"
  90.         ></v-col>
  91.       </v-row>
  92.     </v-sheet>
  93.   </v-card>
  94. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       alignment: 1,
  5.       formatting: [],
  6.       numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
  7.       letters: 'qwertyuiop'.split(''),
  8.       value: 'Toggle button requirements.\r\rHave at least three toggle buttons in a group\rLabel buttons with text, an icon, or',
  9.     }),
  10.   }
  11. </script>

Button groups（按钮组） - 图7