按钮

Quasar有一个名为QBtn的组件,它是一个带有一些额外有用功能的按钮。 例如,它有两种形状:矩形(默认)和圆形。 它还具有内嵌的material波纹效果(可以禁用)。

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

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

QBtn API

用法

标准




自定义颜色




带图标




圆形




方形




自定义内容







设计




对齐




大小




填充(padding)

默认填充为“xs md”。但是,您可以使用padding属性自定义它:




进度相关

一些按钮动作涉及与服务器联系,因此是异步响应。 最好通知用户正在进行的后台处理,直到异步响应准备就绪为止。 QBtn通过loading属性提供了这种可能性。 此属性将显示QSpinner(默认情况下),而不显示按钮的图标和/或标签。 还可以使用自定义加载内容(不仅是文本或)。




如果您愿意,还可以通过使用附加的percentage属性以及您对进度按钮的了解,在按钮内显示确定的进度:




自定义波纹




连接到Vue Router
updated on v2.9+

UMD用法

  • 如果你要使用toreplace属性,请确保你在项目中也注入Vue Router (Quasar CLI项目开箱就有这个功能)。否则就使用替代的href属性。
  • 由于上述原因,下面的一些QBtn在Codepen/jsFiddle中也无法使用。

TIP

如果可以的话,最好使用Vue Router属性而不是href,因为使用href你会触发一个窗口导航而不是页面内的Vue Router导航。




你也可以延迟、取消或重定向导航,如下图所示。关于下面使用的@click事件的更深入描述,请参考页面顶部的QBtn API卡。




对于更复杂的用例,您还可以直接使用原生的Vue<router-link>组件包装QBtn。 这也使您有机会根据应用程序的当前路径来控制状态:




其它选项




Disable




控制表单提交按钮

当您有一个将表单输入提交到服务器的按钮(例如“保存”按钮)时,您通常会希望使用户能够通过按Enter键来提交表单。 如果您还希望向用户提供有关正在进行的保存过程的反馈,并防止用户反复按下该按钮,则需要该按钮显示加载微调器,并禁止其单击事件。 如果配置,QBtn允许此行为。

WARNING

当将类型为“submit”的QBtn放置在QField、QInput或QSelect的“before”、“after”、“prepend”或“append”插槽之一中时,您还应该在有问题的QBtn上添加@click侦听器。 该侦听器应调用提交表单的方法。 此类插槽中的所有“点击”事件均不会传播到其父元素。