下拉按钮

QBtnDropdown是一个非常方便的下拉按钮。 使用QList作为下拉内容会很好，但绝不仅限于此。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QBtnDropdown']
}

基本用法

简单的下拉菜单

<q-btn-dropdown label="Button">
  <!-- 下拉内容 -->
  <q-list link>
    <q-item>
      <q-item-main>
        <q-item-tile label>Item</q-item-tile>
      </q-item-main>
    </q-item>
  </q-list>
</q-btn-dropdown>

使用split属性来分隔目标区域以便打开下拉菜单并触发@click事件

<q-btn-dropdown split label="Button" @click="handlerFunction">
  <!-- 下拉内容 -->
  <q-list link>
    <q-item>
      <q-item-main>
        <q-item-tile label>Item</q-item-tile>
      </q-item-main>
    </q-item>
  </q-list>
</q-btn-dropdown>

Vue属性

所有属性除了split都与QBtn共享。

Vue属性 类型 说明
split 布尔 使用分割的QBtnDropdown
icon 字符串 要使用的图标的名称。
icon-right 字符串 放置在按钮右侧的图标的名称。 (只有split设置为true时有用)
loading 布尔值 如果为true，显示一个旋转器。检查带进度的按钮。
percentage 数字 显示确定进度的可选属性。和loading属性一起使用。
dark-percentage 布尔值 在较亮按钮颜色上显示确定进度的可选属性。和loading和percentage一起使用。
disable 布尔值 如果为true，该按钮被禁用。在这种状态下，不会触发@click事件。
label 字符串/数字 按钮标签。
tabindex 数字 设置明确的选项卡索引。
repeat-timeout 数字/函数 在点击/轻击并按住时启用多个“@click”事件。函数获取一个Number（timesTriggered）作为参数。
wait-for-ripple 布尔值 在发出@click事件之前等待波纹。仅限Material主题。
content-class 字符串/数组/对象 应用于Popover容器的类。
content-style 字符串/数组/对象 应用于Popover容器的样式。

外观

Vue属性 类型 说明
size 字符串 按钮大小。 “xs”、“sm”、“md”、“lg”、“xl”或css字符串形式大小如 25px、2rem、3vw之一。
color 字符串 来自Quasar调色板的颜色。
text-color 字符串 来自Quasar调色板的颜色。
align 字符串 标签/内容对齐。 left, center, right, around, between之一。
dense 布尔值值 密集按钮。
round 布尔值 设置为true，如果你想要一个圆形按钮。
outline 布尔值 设置为true，如果你想要一个概述的按钮。
flat 布尔值 设置为true，如果你想要一个平面按钮。
push 布尔值 设置为true，如果想让按钮具有推送效果。
round 布尔值 设置为true，如果想让方形按钮具有圆角。
glossy 布尔值 设置为true，如果想让按钮具有光泽。
fab 布尔值 浮动操作按钮。 参考链接
fab-mini 布尔值 较小的浮动操作按钮。
no-wrap 布尔值 防止文字换行
no-caps 布尔值 如果您不想将按钮内容/标签转换为Material主题上的大写字母，请设置为true。
no-ripple 布尔值值 禁用Material波纹。仅限Material主题。

Vue事件

Vue事件 说明
@click 按钮点击/轻击触发，如果按钮没有被禁用。

更多例子

QList的完整示例：

请注意使用v-close-overlay指令来关闭通过点击显示的下拉菜单。不要忘记在quasar.conf.js中注册它

<q-btn-dropdown
  color="primary"
  label="Dropdown"
>
  <q-list link>
    <q-item v-for="n in 2" :key="`1.${n}`" v-close-overlay @click.native="handlerFunction">
      <q-item-side icon="folder" inverted color="primary" />
      <q-item-main>
        <q-item-tile label>Photos</q-item-tile>
        <q-item-tile sublabel>February 22, 2016</q-item-tile>
      </q-item-main>
      <q-item-side right icon="info" color="amber" />
    </q-item>
    <q-item-separator inset />
    <q-list-header inset>Files</q-list-header>
    <q-item v-close-overlay @click.native="handlerFunction">
      <q-item-side icon="assignment" inverted color="secondary" />
      <q-item-main>
        <q-item-tile label>Vacation</q-item-tile>
        <q-item-tile sublabel>February 22, 2016</q-item-tile>
      </q-item-main>
      <q-item-side right icon="info" color="amber" />
    </q-item>
  </q-list>
</q-btn-dropdown>
按钮组 工具栏