按钮切换（Button Toggle）

QBtnToggle组件是用户输入的另一个基本元素，与QRadio类似，但带有按钮。 您可以使用它来为用户提供一种从多个选项中选择一个选项的方法。

对于辅助函数、错误消息占位符等许多其他功能，可与QField很好地协作。

安装

编辑/quasar.conf.js：

framework: {
  components: ['QBtnToggle']
}

基础用法

<!-- 用户的三个选项 -->
<q-btn-toggle
  v-model="model"
  toggle-color="primary"
  :options="[
    {label: 'One', value: 'one'},
    {label: 'Two', value: 'two'},
    {label: 'Three', value: 'three'}
  ]"
/>

Vue属性

支持v-model，它应该绑定到范围内的String。选择一个选项（点击/轻击单选按钮）可以让你的v-model变成Radio的val。

Vue属性 类型 说明
options 数组 具有“value”和“label”属性的对象数组。二进制组件将根据此数组创建。
readonly 布尔值 设置为“true”，使单选按钮只读。
disable 布尔值 设置为“true”，禁用单选按钮。
dense 布尔值 密集按钮。
outline 布尔值 设置为true，如果你想要一个概述的按钮。
flat 布尔值 设置为true，如果你想要一个平面按钮。
push 布尔值 设置为true，如果按钮应该具有推送效果。
rounded 布尔值 设置为true，如果方形按钮应该有圆角。
glossy 布尔值 设置为true，如果按钮应该有光泽。
no-wrap 布尔值 防止文字换行
no-caps 布尔值 如果您不想将按钮内容/标签转换为Material主题上的大写字母，请设置为true。
no-ripple 布尔值 禁用Material波纹。仅限Material主题。
wait-for-ripple 布尔值 在发出@click事件之前等待波纹。仅限Material主题。

颜色属性

可以从Quasar调色板中获取值。

Vue属性 类型 说明
color 字符串 按钮的颜色。
text-color 字符串 按钮标签/图标的可选颜色。
toggle-color 字符串 表示当前选择的按钮颜色。
toggle-text-color 字符串 表示当前选择的标签/图标的可选颜色。

选项配置

options属性必须是具有以下结构的对象数组：

{
  // 必需的; 选择按钮时，模型会获取此值：
  value: ...,

  // 至少包括以下三个属性之一：
  label: '...', // 按钮标签
  icon: '...', // 按钮图标
  iconRight: '...', // 右侧按钮图标

  // 可选的覆盖QBtnToggle属性的属性：
  disable,
  color,
  textColor,
  toggleColor,
  toggleTextColor,
  noCaps,
  noWrap,
  noRipple,
  waitForRipple,
  tabindex
}

Vue事件

Vue事件 说明
@input 当它被选中时触发。
切换组件 选项组