按钮(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 布尔值 在较亮按钮颜色上显示确定进度的可选属性。和loadingpercentage一起使用。
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字符串形式大小如 25px2rem3vw之一。此表格下方有更多信息。
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 按钮点击/轻击触发,如果按钮没有被禁用。

更多例子

将图标添加到常规按钮时,其位置有两种可能性。默认位置是左侧。使用icon-right属性来改变图标的​​位置:

<!-- 图标将会放置在左边 -->
<q-btn icon="mail" color="primary" label="Button Label" />

<!-- 图标将会放置在右边 -->
<q-btn icon-right="mail" color="teal" label="Button Label" />

<!-- 图标将会放置在两边 -->
<q-btn icon="mail" icon-right="mail" color="teal" label="Button Label" />

按钮大小

使用具有以下值之一的size属性:xssmmdlgxl。 您不需要指定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, roundedglossy 属性,供您用来控制按钮的某些设计方面。

<!-- 一个概述按钮 -->
<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>