按钮(Button)

Quasar有一个名为QBtn的组件，它是一个带有一些额外有用功能的按钮。例如，它有两种形状：矩形（默认）和圆形。在使用Material主题构建时，它也默认具有Material波纹效应。

按钮组件还带有一个旋转器或者加载效果。当应用程序执行可能会导致延迟时，您可能会使用它，并且您希望向用户提供关于该延迟的一些反馈。使用时，只要用户单击按钮，该按钮将显示旋转动画。

当不是禁用状态或旋转时，一旦点击或轻击，QBtn就会发出“@click”事件。

安装

编辑/quasar.conf.js：

framework: {
  components: ['QBtn']
}

基础用法

<!-- 只是标签 -->
<q-btn label="New item" />

<!-- 只是图标 -->
<q-btn icon="map" />

<!-- 图标 & 标签 -->
<q-btn icon="create" label="New item" />

一个标准圆形(round)按钮

<!--
   注意指定的“round”和
   自闭合标签（因为我们不需要指定任何
   按钮的内容 - 反正图标填充所有可用内容空间）。 
   该标签被丢弃。
-->
<q-btn round color="secondary" icon="card_giftcard" />

<!--
  接下来是完全相同的，但任何时候都可以使用“icon”属性。
-->
<q-btn round color="secondary">
  <q-icon name="card_giftcard" />
</q-btn>

重要事项
对于圆形按钮，只能使用图标作为内容，通过“icon”属性或QIcon组件作为唯一的子元素。除了图标外，不要添加任何其他内容，除非您想要Popover或Tooltip。

小尺寸的初始(primary)色按钮：

<q-btn
  color="primary"
  size="sm"
  label="Edit"
/>

具有“loading”状态的按钮（我们稍后会在其自己的章节中更详细地介绍这些内容）：

<!-- 正常形状 -->
<q-btn
  loading
  color="primary"
  @click="clickMethod"
  label="Button Label"
/>

<template>
  <!-- 圆形(仅使用图标或旋转器作为内容!)，带加载状态  -->
  <q-btn
    :loading="loading"
    round
    icon="map"
    color="primary"
    @click="handler"
  >
    <q-spinner-oval slot="loading" />
  </q-btn>
</template>

<script>
export default {
  data () {
    return {
      loading: false
    }
  },
  methods: {
    handler () {
      this.loading = true
      // 我们在这里模拟一个延迟：
      setTimeout(() => {
        this.loading = false
      }, 3000)
    }
  }
}
</script>

Vue属性

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

路由器语法糖

Vue属性	类型	说明
`to`	字符串/对象	单击时使按钮转到指示的路径。
`replace`	布尔值	替换当前路径而不是推送到窗口历史记录。

上面的属性只是语法糖，类似于<router-link>Vue组件。

<q-btn label="Home" to="/" />
<!-- 等同于: -->
<q-btn label="Home" @click="$router.push('/')" />

外观

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主题。

大小属性值：

尺寸值	说明
xs，…，xl	预定义尺寸
form	与输入表单组件大小相同
form-label	与具有堆栈/浮点标签的输入表单组件大小相同
form-hide-underline	与没有下边框的输入表单组件大小相同
form-label-hide-underline	与具有堆栈/浮点标签且没有下边框的输入表单组件大小相同
form-inverted	与反转输入表单组件大小相同
form-label-inverted	与具有堆栈/浮点标签的反转输入表单组件大小相同

Vue事件

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

按钮大小

使用具有以下值之一的size属性：xs，sm，md，lg，xl。您不需要指定md，因为这是默认大小。

<q-btn color="primary" size="xs" label="Extra Small Button" />

<q-btn color="primary" size="sm" label="Small Button" />

<q-btn color="primary" size="md" label="Medium Button" />

<q-btn color="primary" size="lg" label="Large Button" />

<q-btn color="primary" size="xl" label="Extra Large Button" />

您也可以使用CSS单位作为尺寸：

<q-btn color="primary" size="25px" label="25 Pixels" />

<q-btn color="primary" size="2rem" label="2 Rem" />

<q-btn color="primary" size="3vh" label="3 View Height" />

您还可以使用全局可用的CSS辅助类block（将CSSdisplay属性设置为block）或full-width来展开按钮。

按钮颜色

使用Quasar调色板中的任何颜色。例如： primary, orange, lime, ‘amber-8’。

<q-btn color="primary" label="Primary Button"/>
<q-btn color="amber" label="Amber Button"/>
<q-btn color="primary" text-color="amber" label="Primary Button with Amber text" />

按钮样式类型

还有outline, push, round, flat, rounded 和 glossy 属性，供您用来控制按钮的某些设计方面。

<!-- 一个概述按钮 -->
<q-btn outline color="teal" label="Outlined Button" />

<!-- 一个圆形的有推送样式的按钮-->
<q-btn rounded push color="secondary" label="Rounded Push Button"/>

<!-- 一个有光泽的按钮 -->
<q-btn glossy color="primary" label="Glossy" />

<!-- 一个扁平密集的圆形按钮 -->
<q-btn flat dense round icon="menu" color="primary" />

带进度的按钮

某些按钮操作涉及到联系服务器，因此是异步响应。最好通知用户有关后台进程，直到异步响应准备就绪。 QBtn通过loading提供这种可能性。此属性将显示QSpinner（默认情况下）而不是按钮的图标和/或标签。也可以使用自定义的加载内容。

这里有一个完整的例子，强调你可以用loading属性来做什么。

<template>
  <!-- 注意 `loading` 属性 -->
  <q-btn :loading="loading" @click="simulateProgress" label="Button Label">
    Button Label
    <!--
      注意 slot="loading"。这是可选的。
      如果缺失，默认主题旋转器将会使用
    -->
    <span slot="loading">Loading...</span>
  </q-btn>
</template>

<script>
export default {
  data () {
    return { loading: false }
  },
  methods: {
    simulateProgress () {
      // 我们设置加载状态
      this.loading = true

      // 模拟一个延迟，就像在等待一个Ajax调用
      setTimeout(() => {
        // 延迟结束, 现在我们重置加载状态
        this.loading = false
        // 别忘了重置加载状态
        // 否则按钮将保持在“loading”状态
      }, 3000)
    }
  }
}
</script>

如果您想要添加与默认主题不同的旋转器(Spinner)，您可以通过插入您喜欢的Spinner组件来完成此操作。

<q-btn
  icon="mail"
  label="Get Mail"
  color="orange"
  @click="simulateProgress"
>
  <q-spinner-facebook slot="loading" size="20px" />
</q-btn>

“loading”插槽可以包含任何内容。它不仅限于文字或Spinner。你可以使用任何你想要的DOM元素或组件。最终的结果是，当处于“loading”状态时，Button内容将被“loading”时所包含的内容替换。而且，在此状态下，该按钮被禁用，因此不会不必要地触发进一步的点击事件。

确定性进度处理

如果您愿意，您还可以在按钮内显示确定性进度，方法是使用额外的“percentage”属性——在您已经了解的“带有进度的按钮”学习基础上：

<template>
  <q-btn
    :percentage="percentage"
    :loading="loading"
    label="Compute PI"
    color="primary"
    @click="startComputing"
  >
    <span slot="loading">
      <q-spinner-gears class="on-left" />
      Computing...
    </span>
  </q-btn>
</template>

<script>
// 记住在quasar.conf.js里注册必要的组件
export default {
  data () {
    return {
      loading: false
      percentage: 0
    }
  },
  methods: {
    startComputing () {
      this.loading = true
      this.percentage = 0

      //我们在这里模拟进度
      this.interval = setInterval(() => {
        // 添加一个随机数量的百分比
        this.percentage += Math.floor(Math.random() * 8 + 10)

        // 当我们完成时......
        if (this.percentage >= 100) {
          clearInterval(this.interval)
          // 不要忘记重置加载状态：
          this.loading = false
        }
      }, 700)
    }
  },
  beforeDestroy () {
    // 当用户在进度结束之前离开时, 我们也需要清除时间间隔
    clearInterval(this.interval)
  }
}
</script>

如果按钮的颜色较浅，也可以使用dark-percentage属性。

控制表单提交按钮

当你有一个按钮将一个表单的输入提交给服务器时，比如“保存”按钮，通常你会希望给用户提供按下回车键提交表单的能力。如果您还希望向用户提供正在进行的保存过程的反馈，并防止用户反复按下该按钮，则需要该按钮显示加载旋转器并禁用点击事件。如果配置如此，QBtn允许这种行为。

为了控制这个加载特性，你只需将按钮的’v-model’设置为’true’的表单逻辑。一旦设置为“true”，该按钮将显示旋转器。要停止该过程，请将v-model值设置为false。

下面的例子用Enter键演示了这个按钮控件。

<template>
  <div>
    <!-- 一个简单的文本字段来侦听输入键的输入 -->
    <q-input v-model="test" @keyup.enter="simulateSubmit" />

    <!--
      一个带有v-model设置来控制提交的按钮。
      v-model范围变量必须是严格的布尔值
    -->
    <q-btn :loading="submitting" @click="simulateSubmit" label="Save">
      <q-spinner-facebook slot="loading" />
    </q-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: '',
      submitting: false
    }
  },
  methods: {
    simulateSubmit () {
      this.submitting = true

      // 在这里模拟延迟。
      // 当我们完成后，我们重置“submitting”布尔值为false以恢复初始状态。
      setTimeout(() => {
        // 延迟模拟，我们完成了，
        // 现在恢复提交到其初始状态
        this.submitting = false
      }, 3000)
    }
  }
}
</script>

禁用按钮

要禁用按钮，请使用disable属性。除了应用于按钮的小褪色效果之外，@click事件将不再被触发。

<q-btn color="primary" disable label="Primary Button" />
<q-btn color="amber" :disable="booleanVar" label="Amber Button" />

处理表格

需要Quasar v0.15.11+

如果您希望在<form>标记内使用QBtn，您应该知道(type =“button”，它是隐式的，以及type =“submit”)之间的区别：

<form>
  ...
  <q-btn label="I do not submit form" />
  <q-btn type="submit" label="I do submit the form" />
  ...
</form>

在Vue路由器上使用按钮

如果您想使用按钮导航到新页面，则不需要使用包裹的<router-link>标签。相反，您可以使用“@click”事件来处理路由更改。

<q-btn
  @click="$router.push('/path/to/new/page')"
  color="primary"
  label="navigate"
/>

延迟按钮单击事件

在Material主题上，您可以延迟按钮的“@click”，直到Material波纹通过“wait-for-ripple”属性到达按钮边缘。当你想要一个按钮来消除一个Modal时，从用户界面的角度作为例子很有用。

<q-btn
  wait-for-ripple
  @click="clickHandler"
  label="Click Me"
/>

使用点击并按住按钮

如果您想在点击时多次触发按钮的“@click”事件，请使用“repeat-timeout”属性。接受一个数字或一个函数（返回一个数字）。这个数字表示再次触发@click事件之前的等待时间。

<template>
  <!-- 点击并按住以每秒触发-->
  <q-btn @click="clickHandler" :repeat-timeout="1000" label="Click Me" />

  <!-- 点击并按住, 随着时间推移更快地触发 -->
  <q-btn @click="clickHandler" :repeat-timeout="repeatFunction" label="Click Me" />
</template>
<script>
  export default {
    methods: {
      clickHandler () {
        console.log('Handler Triggered')
      },
      repeatFunction (timesTriggered) {
        // 第一次timesTriggered是0, 所以我们加1
        // 以确保我们不会除以0
        return 1000 / (timesTriggered + 1)
      }
    }
  }
</script>

窗口大小侦听器按钮组

组件

风格 & 特性

CSS辅助类

布局

按钮

导航

表单组件

分组

弹出窗口

进度

媒体

滚动

动画

其它组件

触摸/鼠标操作

实用程序

网络API封装