按钮

Buttons 按钮
Button Group 按钮组合
Buttons 按钮
Button Dropdown 下拉按钮
Form Components 表单组件
Button Toggle 按钮开关

Quasar 中的按钮组件叫 QBtn，它还带有一些额外实用的特性。例如：它自带两种样式，默认是矩形，可以设置为圆形，自带涟漪动画（可以禁用）。

自带加载动画，您可以在应用程序需要等待的时候使用，给用户一些关于延迟需要等待的反馈。使用时，当用户点击按钮时，按钮将显示一个旋转的加载动画（加载动画可以自定义）。

当按钮被点击时，会触发它的@click事件，除非它被禁用了。

QBtn API

QBtn API
loading
: Boolean | null
说明
将按钮置于加载状态（显示一个 QSpinner ——可以通过使用 'loading' 插槽来重写）
percentage
: Number
说明
百分比（0.0<x<100.0）；和 'loading' 属性一起使用。在背景上显示进度条
dark-percentage
: Boolean
说明
背景上的进度条设置为深色。与 'percentage' 和 'loading' 属性一起使用

用法

标准

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="white" text-color="black" label="Standard" />
    <q-btn color="primary" label="Primary" />
    <q-btn color="secondary" label="Secondary" />
    <q-btn color="amber" glossy label="Amber" />
    <q-btn color="brown-5" label="Brown 5" />
    <q-btn color="deep-orange" glossy label="Deep Orange" />
    <q-btn color="purple" label="Purple" />
    <q-btn color="black" label="Black" />
  </div>
</template>

自定义颜色

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn style="background: #FF0080; color: white" label="Fuchsia" />
    <q-btn flat style="color: #FF0080" label="Fuchsia Flat" />
    <q-btn style="background: goldenrod; color: white" label="Goldenrod" />
    <q-btn outline style="color: goldenrod;" label="Goldenrod" />
    <q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text" />
  </div>
</template>

加上图标

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="primary" icon="mail" label="On Left" />
    <q-btn color="secondary" icon-right="mail" label="On Right" />
    <q-btn color="red" icon="mail" icon-right="send" label="On Left and Right" />
    <br>
    <q-btn icon="phone" label="Stacked" stack glossy color="purple" />
  </div>
</template>

圆形按钮

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn round color="primary" icon="shopping_cart" />
    <q-btn round color="secondary" icon="navigation" />
    <q-btn round color="amber" glossy text-color="black" icon="layers_clear" />
    <q-btn round color="brown-5" icon="directions" />
    <q-btn round color="deep-orange" icon="edit_location" />
    <q-btn round color="purple" glossy icon="local_grocery_store" />
    <q-btn round color="black" icon="my_location" />
  </div>
</template>

自定义内容

<template>
  <div class="q-pa-md q-gutter-md">
    <q-btn color="teal">
      <q-icon left size="3em" name="map" />
      <div>Label</div>
    </q-btn>

    <q-btn round>
      <q-avatar size="42px">
        <img src="https://cdn.quasar.dev/img/avatar2.jpg">
      </q-avatar>
    </q-btn>

    <q-btn color="indigo" no-caps>
      Multiline<br>Button
    </q-btn>

    <q-btn color="deep-orange" push>
      <div class="row items-center no-wrap">
        <q-icon left name="map" />
        <div class="text-center">
          Custom<br>Content
        </div>
      </div>
    </q-btn>
  </div>
</template>
<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="primary" style="width: 200px">
      <div class="ellipsis">
        This is some very long text that is expected to be truncated
      </div>
    </q-btn>
  </div>
</template>

不同的外形设计

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn flat color="primary" label="Flat" />
    <q-btn flat rounded color="primary" label="Flat Rounded" />
    <q-btn flat round color="primary" icon="card_giftcard" />
    <br>
    <q-btn outline color="primary" label="Outline" />
    <q-btn outline rounded color="primary" label="Outline Rounded" />
    <q-btn outline round color="primary" icon="card_giftcard" />
    <br>
    <q-btn push color="primary" label="Push" />
    <q-btn push color="primary" round icon="card_giftcard" />
    <q-btn push color="white" text-color="primary" label="Push" />
    <q-btn push color="white" text-color="primary" round icon="card_giftcard" />
    <br>
    <q-btn unelevated color="primary" label="Unelevated" />
    <q-btn unelevated rounded color="primary" label="Unelevated Rounded" />
    <q-btn unelevated round color="primary" icon="card_giftcard" />
    <br>
    <q-btn no-caps color="primary" label="No caps" />
    <br>
    <q-btn class="glossy" color="teal" label="Glossy" />
    <q-btn class="glossy" rounded color="deep-orange" label="Glossy Rounded" />
    <q-btn class="glossy" round color="primary" icon="card_giftcard" />
    <q-btn class="glossy" round color="secondary" icon="local_florist" />
    <q-btn class="glossy" round color="deep-orange" icon="local_activity" />
  </div>
</template>





对齐

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn align="left" class="btn-fixed-width" color="primary" label="Align to left" />
    <q-btn align="right" class="btn-fixed-width" color="secondary" label="Align to right" />
    <q-btn align="between" class="btn-fixed-width" color="accent" label="Align between" icon="flight_takeoff" />
    <q-btn align="around" class="btn-fixed-width" color="brown-5" label="Align around" icon="lightbulb_outline" />
  </div>
</template>

大小

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn
      v-for="size in sizes" :key="`btn_size_sq_${size}`"
      color="primary"
      :size="size"
      :label="`Size ${size}`"
    />
    <br>
    <q-btn
      v-for="size in sizes" :key="`btn_size_rd_${size}`"
      rounded
      color="primary"
      :size="size"
      :label="`Size ${size}`"
    />
    <br>
    <q-btn
      v-for="(size, i) in sizes" :key="`btn_size_round_${size}`"
      round
      color="primary"
      :size="size"
      :icon="icons[i]"
    />

    <br>

    <q-btn
      v-for="size in sizes" :key="`btn_size_dense_sq_${size}`"
      dense
      color="primary"
      :size="size"
      :label="`Size ${size}`"
    />
    <br>
    <q-btn
      v-for="size in sizes" :key="`btn_size_dense_rd_${size}`"
      rounded
      dense
      color="primary"
      :size="size"
      :label="`Size ${size}`"
    />
    <br>
    <q-btn
      v-for="(size, i) in sizes" :key="`btn_size_dense_round_${size}`"
      round
      dense
      color="primary"
      :size="size"
      :icon="icons[i]"
    />

    <br>

    <q-btn
      size="10px"
      color="black"
      label="Text height: 10px"
    />
    <q-btn
      size="22px"
      class="q-px-xl q-py-xs"
      color="purple"
      label="Custom"
    />
    <q-btn
      size="35px"
      round
      color="teal"
      icon="map"
    />
  </div>
</template>






内边距

默认的内边距是 “xs md”。 您可以用 padding 这个属性来自定义它的内边距:

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn
      padding="none"
      color="primary"
      icon="eco"
    />

    <q-btn
      padding="xs"
      color="primary"
      icon="eco"
    />

    <q-btn
      padding="lg"
      color="primary"
      icon="eco"
    />

    <q-btn
      padding="10px 5px"
      color="primary"
      icon="eco"
    />

    <q-btn
      padding="xs lg"
      color="primary"
      icon="eco"
    />

    <q-btn
      padding="xl"
      color="primary"
      round
      icon="eco"
    />

    <q-btn
      padding="xs lg"
      color="primary"
      round
      icon="eco"
    />

    <q-btn
      padding="lg xs"
      color="primary"
      round
      icon="eco"
    />
  </div>
</template>

加载和进度相关

一些按钮的操作涉及到与服务器通信，因为是异步通信，所以可能会需要一些时间。最好在异步响应准备好之前通知用户正在进行的后台进程，QBtn 提供了一个 Loading 属性可以做到这些。使用这个属性会展示一个加载动画来代替原来的文字和图标。（加载动画默认是通过 QSpinner 组件实现，当然您也可以自定义加载动画）

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn :loading="loading[0]" color="secondary" @click="simulateProgress(0)" label="Button" />
    <q-btn :loading="loading[1]" color="red" @click="simulateProgress(1)">
      Button
      <template v-slot:loading>
        Loading...
      </template>
    </q-btn>
    <q-btn :loading="loading[2]" color="purple" @click="simulateProgress(2)">
      Button
      <template v-slot:loading>
        <q-spinner-radio />
      </template>
    </q-btn>
    <q-btn :loading="loading[3]" color="primary" @click="simulateProgress(3)" style="width: 150px">
      Button
      <template v-slot:loading>
        <q-spinner-hourglass class="on-left" />
        Loading...
      </template>
    </q-btn>
    <br>
    <q-btn round :loading="loading[4]" color="brown" @click="simulateProgress(4)" icon="camera_front">
      <template v-slot:loading>
        <q-spinner-facebook />
      </template>
    </q-btn>
    <q-btn round :loading="loading[5]" color="black" @click="simulateProgress(5)" icon="camera_rear">
      <template v-slot:loading>
        <q-spinner-gears />
      </template>
    </q-btn>
    <br>

    <q-btn :loading="progress" color="primary" @click="progress = true">
      Controlled from outside
      <template v-slot:loading>
        <q-spinner-radio class="on-left" />
        Click "Stop" Button
      </template>
    </q-btn>
    <q-btn :disable="!progress" color="negative" @click="progress = false" label="Stop" />
  </div>
</template>


此外，您还可以额外使用一个percentage 属性在按钮中显示出进度信息：

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn
      :loading="progress[0].loading"
      :percentage="progress[0].percentage"
      color="primary"
      @click="startComputing(0)"
      style="width: 150px"
    >
      Compute PI
      <template v-slot:loading>
        <q-spinner-gears class="on-left" />
        Computing...
      </template>
    </q-btn>

    <q-btn
      :loading="progress[1].loading"
      :percentage="progress[1].percentage"
      round
      color="secondary"
      @click="startComputing(1)"
      icon="cloud_upload"
    />

    <q-btn
      :loading="progress[2].loading"
      :percentage="progress[2].percentage"
      dark-percentage
      unelevated
      color="orange"
      text-color="grey-9"
      @click="startComputing(2)"
      icon="cloud_upload"
      style="width: 100px"
    />
  </div>
</template>

自定义水波动画

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn :ripple="false" color="secondary" label="No ripple" no-caps />
    <q-btn :ripple="{ color: 'yellow' }" color="secondary" label="Yellow ripple" no-caps />
    <q-btn :ripple="{ center: true }" color="secondary" label="Center ripple" no-caps />
  </div>
</template>

处理导航跳转
updated for v2.4+

UMD usage

  • 如果您要使用to和replace属性，请确保跳转的目标路由已经被您定义在您的项目中了，否则请使用href属性。
  • 鉴于上述原因，下面的一些按钮示例不能运行在 Codepen/jsFiddle 中，因为 Codepen/jsFiddle 上的项目没有 vue-router

TIP

如果可以的话，尽量使用Vue Router提供的路由做页面跳转而不是使用href属性，因为使用href您会触发浏览器原生的导航而不是页面内的Vue Router导航，这不符合（spa）单页应用的定义。

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn to="/start/pick-quasar-flavour" label="To Docs index" outline color="purple" />
    <q-btn to="/start/pick-quasar-flavour" label="To Docs index in 2s" @click="linkClick" glossy color="purple" />

    <q-btn href="start/pick-quasar-flavour" label="With href" push color="purple" />
    <q-btn href="start/pick-quasar-flavour" target="_blank" label="With href - open in new window" color="purple" />
  </div>
</template>
To Docs indexTo Docs index in 2sWith hrefWith href - open in new window

对于更复杂的用例，也可以直接使用Vue的原生组件<router-link>包装QBtn，这样也可以达到路由跳转的功能。

<template>
  <div class="q-pa-md column q-gutter-sm">
    <router-link
      :to="{ hash: '#Handling-links' }"
      custom
      v-slot:default="props"
    >
      <q-btn v-bind="buttonProps(props)" />
    </router-link>

    <router-link
      :to="{ hash: '#Handling-links', query: { search: '1' } }"
      custom
      v-slot:default="props"
    >
      <q-btn v-bind="buttonProps(props)" />
    </router-link>

    <router-link
      :to="{ hash: '#Handling-links', query: { search: '1', test: '1' } }"
      custom
      v-slot:default="props"
    >
      <q-btn v-bind="buttonProps(props)" />
    </router-link>

    <router-link
      :to="{ hash: '#Handling-links', query: { search: '1', test: '2' } }"
      custom
      v-slot:default="props"
    >
      <q-btn v-bind="buttonProps(props)" />
    </router-link>

    <router-link
      :to="{ hash: '#Handling-links', query: { search: '1', test: '1' } }"
      custom
      v-slot:default="props"
    >
      <q-btn v-bind="buttonProps(props)" icon-right="timer_3" @click="linkClick" />
    </router-link>
  </div>
</template>
To "/vue-components/button#Handling-links"To "/vue-components/button?search=1#Handling-links"To "/vue-components/button?search=1&test=1#Handling-links"To "/vue-components/button?search=1&test=2#Handling-links"To "/vue-components/button?search=1&test=1#Handling-links"

其他选项

<template>
  <div class="q-pa-md">
    <q-btn color="black" class="full-width" label="Full-width" />

    <q-btn color="primary" label="With Tooltip" class="q-mt-md">
      <q-tooltip class="bg-accent">I'm a tooltip</q-tooltip>
    </q-btn>
  </div>
</template>

禁用

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="primary" disable label="Disabled" />
    <q-btn round color="primary" disable icon="card_giftcard" />
    <q-btn flat color="primary" disable label="Disabled" />
    <q-btn flat round color="primary" disable icon="card_giftcard" />
    <q-btn outline color="primary" disable label="Disabled" />
    <q-btn outline round color="primary" disable icon="card_giftcard" />
    <q-btn push color="primary" disable label="Disabled" />
    <q-btn push round color="primary" disable icon="card_giftcard" />
    <q-btn class="glossy" color="primary" disable label="Disabled" />
    <q-btn class="glossy" round color="primary" disable icon="card_giftcard" />
  </div>
</template>

控制表单提交

Qbtn 可以作为表单的提交按钮，同时还可以实现按 enter 按键来提交，进度提示，加载动画，阻止重复提交等功能。（只需要在点击时将按钮设置为禁用状态即可实现阻止重复提交）

WARNING

当将类型为 submit 的 QBtn 放置在 QField、QInput 或 QSelect 的插槽之中时，您还应该在它的@click 事件中调用表单的提交方法。这些插槽中的所有点击事件都不会冒泡到它们的父元素。（这段可能翻译的不好，所以把原文留下了了）

When placing a QBtn with type “submit” in one of the “before”, “after”, “prepend”, or “append” slots of a QField, QInput or QSelect, you should also add a @click listener on the QBtn in question. This listener should call the method that submits your form. All “click” events in such slots are not propagated to their parent elements.

<template>
  <form @submit.prevent="simulateSubmit" class="q-pa-md">
    <!-- a simple text field watching for the enter key release -->
    <q-input
      filled
      color="teal"
      hint="输入后试试使用Enter键来提交"
      v-model="test"
    />

    <!--
      A button with v-model set to submit.
      v-model scope variable must be a strict Boolean
    -->
    <div class="row justify-end">
      <q-btn
        type="submit"
        :loading="submitting"
        label="Save"
        class="q-mt-md"
        color="teal"
      >
        <template v-slot:loading>
          <q-spinner-facebook />
        </template>
      </q-btn>
    </div>
  </form>
</template>
查看更多？
Vue 组件
Breadcrumbs 面包屑
Buttons 按钮
Button Group 按钮组合
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。