溢出按钮

v-overflow-btn 用于使用户能够从列表中选择项目。 它具有 3 种变量：editable, overflow 和 segmented

用例

v-overflow-btn 用于创建选择列表

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      label="Overflow Btn"
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

在为 items 属性使用对象时，您必须将 item-text 和 item-value 与对象上的现有属性关联。这些值默认为 text 和 value，可以更改。

menu-props 的 auto 属性只支持默认输入样式。

API

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

实战场

template script

<template>
  <v-row align="center">
    <v-row justify="space-around">
      <v-switch
        v-model="editable"
        class="ma-2"
        label="Editable"
      ></v-switch>
      <v-switch
        v-model="segmented"
        class="ma-2"
        label="Segmented"
      ></v-switch>
      <v-switch
        v-model="loading"
        class="ma-2"
        label="Loading"
      ></v-switch>
      <v-switch
        v-model="disabled"
        class="ma-2"
        label="Disabled"
      ></v-switch>
      <v-switch
        v-model="readonly"
        class="ma-2"
        label="Readonly"
      ></v-switch>
      <v-switch
        v-model="filled"
        class="ma-2"
        label="Filled"
      ></v-switch>
      <v-switch
        v-model="reverse"
        class="ma-2"
        label="Reverse"
      ></v-switch>
      <v-switch
        v-model="dense"
        class="ma-2"
        label="Dense"
      ></v-switch>
      <v-switch
        v-model="persistentHint"
        class="ma-2"
        label="Persistent hint"
      ></v-switch>
      <v-switch
        v-model="topMenu"
        class="ma-2"
        label="Menu to top"
      ></v-switch>
    </v-row>
    <v-container id="dropdown-playground">
      <v-overflow-btn
        class="my-2"
        :items="dropdownFont"
        :editable="editable"
        :segmented="segmented"
        :loading="loading"
        :disabled="disabled"
        :readonly="readonly"
        :filled="filled"
        :reverse="reverse"
        :dense="dense"
        :persistent-hint="persistentHint"
        :menu-props="topMenu ? 'top' : ''"
        hint="I'm a hint"
        label="Overflow Btn"
        target="#dropdown-playground"
      ></v-overflow-btn>
    </v-container>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      dropdownFont: [
        { text: 'Arial', callback: () => {} },
        { text: 'Calibri', callback: () => {} },
        { text: 'Courier', callback: () => {} },
        { text: 'Verdana', callback: () => {} },
      ],
      editable: false,
      segmented: false,
      loading: false,
      disabled: false,
      readonly: false,
      filled: false,
      reverse: false,
      dense: false,
      persistentHint: false,
      topMenu: false,
    }),
  }
</script>

示例

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

计数器

您可以添加一个计数器到 v-overflow-btn 来控制最大字符计数

template script

<template>
  <v-container id="dropdown-example-3">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_edit"
      label="Overflow Btn w/ counter"
      counter
      item-value="text"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_edit: [
        { text: '100%' },
        { text: '75%' },
        { text: '50%' },
        { text: '25%' },
        { text: '0%' },
      ],
    }),
  }
</script>

禁用

v-overflow-btn 可以被禁用，以防止用户与它进行交互。

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      label="Overflow Btn w/ disabled"
      disabled
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

密集

您可以使用 dense 属性来降低溢出按钮的高度并降低列表项的最大高度。

template script

<template>
  <v-container>
    <v-overflow-btn
      class="my-2"
      :items="items"
      label="Overflow Btn - Dense"
      dense
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      items: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

可编辑

editable v-overflow-btn 可以直接编辑，就像 v-text-field 一样

template script

<template>
  <v-container id="dropdown-example-3">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_edit"
      label="Overflow Btn w/ editable"
      editable
      item-value="text"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_edit: [
        { text: '100%' },
        { text: '75%' },
        { text: '50%' },
        { text: '25%' },
        { text: '0%' },
      ],
    }),
  }
</script>

填充的

文本框可以使用替代的样式设计，但是这种模式下不支持附加或者前置图标属性。

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      label="Overflow Btn - filled"
      filled
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

Material Dashboard Pro

Vuetify Material Dashboard PRO is a beautiful theme built over Vuetify, Vuex and Vuejs. Vuetify Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO.

ads by Vuetify

](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vuetifyjs.com&partner=116160)

提示

您可以使用 hint 属性为用户添加提示

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      menu-props="top"
      label="Overflow Btn w/ hint"
      hint="Select font"
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

加载

v-overflow-btn 可以处于 loading 状态，并且在其下方具有线性进度条

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      label="Overflow Btn w/ loading"
      loading
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

菜单属性

你可以使用 menu-props 属性设置底部的 v-menu 属性

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      menu-props="top"
      label="Overflow Btn w/ menu-props"
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

只读

v-overflow-btn 可以设置为 readonly 模式，它将处于非活动状态，但不会改变颜色

template script

<template>
  <v-container id="dropdown-example-1">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_font"
      label="Overflow Btn w/ readonly"
      readonly
      target="#dropdown-example-1"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_font: ['Arial', 'Calibri', 'Courier', 'Verdana'],
    }),
  }
</script>

分段

segmented v-overflow-btn 在内容和图标之间有一个附加的分隔符

template script

<template>
  <v-container id="dropdown-example-2">
    <v-overflow-btn
      class="my-2"
      :items="dropdown_icon"
      label="Overflow Btn w/ segmented"
      segmented
      target="#dropdown-example-2"
    ></v-overflow-btn>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      dropdown_icon: [
        { text: 'list', callback: () => console.log('list') },
        { text: 'favorite', callback: () => console.log('favorite') },
        { text: 'delete', callback: () => console.log('delete') },
      ],
    }),
  }
</script>