选择组件

选择组件有两种类型的选择：单选（使用单选框或列表）或多选（使用复选框或切换）。 该组件打开选择列表和操作的弹出框。 过滤器也可以用于更长的列表。

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QSelect']
}

基本用法

<template>
  <div>
    <!-- 单选使用单选框 -->
    <q-select
      v-model="select"
      float-label="Is Quasar Awesome?"
      radio
     :options="selectOptions"
    />

    <!-- 以一个简单的列表进行单选 -->
    <q-select
      v-model="select"
      :options="selectOptions"
    />

    <!-- 默认情况下使用复选框进行多选 -->
    <q-select
      multiple
      v-model="multipleSelect"
      :options="selectOptions"
    />

    <!-- 使用切换进行多选-->
    <q-select
      multiple
      toggle
      v-model="multipleSelect"
      :options="selectOptions"
      @change="inputChange"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Facebook',
          value: 'fb'
        }
      ]
    }
  }
}
</script>

Vue属性

支持v-model，它应该是单个选择的字符串和多个选择的数组。

Vue属性 类型 说明
options 数组 （必填）呈现为选择的选项的对象列表。请参阅下面的数组格式。
multiple 布尔 如果设置为“true”，则允许多个选择。
radio 布尔 如果设置为“true”，则将通过单选框选择。仅限单一选择。
toggle 布尔 如果设置为“true”，则选择的选项将提供切换以选择它们。
chips-color 布尔 如果设置为“true”，则选择将在输入框中显示为碎片（而不是逗号分隔的字符串）（仅适用于多选）。
chips-bg-color 字符串 覆盖默认的子碎片文本颜色。
chips-bg-color 字符串 覆盖默认的子碎片背景颜色。
readonly 布尔 如果设置为“true”，则选择组件为只读，并且用户不能更改模型。
filter 布尔 如果设置为“true”，则选择组件将提供输入框以过滤选择选项。
autofocus-filter 布尔 打开选择时自动聚焦在过滤输入框（如果有的话）。
filter-placeholder 字符串 要在过滤输入框中显示的文本。默认是“过滤器”。
separator 布尔 如果设置为“true”，则选择选项将由一行分隔。
display-value 字符串 覆盖输入框中显示的文本。请参阅下面的“使用显示值”一节。
placeholder 字符串 占位符文本。
clearable 布尔 如果设置为“true”，则该组件向用户提供可操作的图标以移除当前选择。
no-icon 布尔 左侧没有图标

通用输入框属性：

属性 类型 说明
prefix 字符串 应在文本字段之前显示的文本。
suffix 字符串 应在文本字段后显示的文本。
float-label 字符串 一旦输入字段获得焦点，文本标签将“浮动”到输入字段上方。
stack-label 字符串 将显示在输入字段上方并且是静态的文本标签。
color 字符串 一个来自Quasar调色板的颜色。
inverted 布尔 反转模式。颜色应用于背景。
inverted-light 布尔 浅色的反转模式。颜色应用于背景。
dark 布尔 它是否在黑暗的背景下呈现？
align 字符串 ‘left’、 ‘center’ 或 ‘right’中的一个，用于确定文本字段内的文本对齐。
disable 布尔 如果设置为true，则文本字段被禁用，用户无法输入任何内容。
hide-underline 布尔 隐藏底部边框。
error 布尔 如果设置为true，则会更改输入字段颜色以显示出现错误。
warning 布尔 与error相同，更改输入字段颜色以显示警告。
before 对象数组 在文本字段左侧的图标按钮。阅读下面的更多细节。
after 对象数组 在文本字段右侧的图标按钮。阅读下面的更多细节。

图标按钮

本部分引用before和after属性，它们可以将额外按钮作为图标添加到文本字段中。这是两个属性的结构：

{
  // 必需的图标
  icon: String,
  // 当点击/轻按图标时
  // 调用的必需函数
  handler: Function,

  // 可选的。 如果模型有一个值
  // 则显示图标按钮
  content: Boolean,

  // 可选的。 如果文本字段标有错误
  // 则显示图标按钮
  error: Boolean
}

例子:

<!--
  显示一个图标按钮（icon设为“warning“）
  Show an icon button (with 'warning' as icon)
-->
<q-select
  v-model="selection"
  :options="selectListOptions"
  :after="[
    {
      icon: 'warning',
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  当模型具有非空值时(就像有东西一样已被选中)
  显示一个图标按钮（icon设为“arrow_forward“）
-->
<q-select
  v-model="selection"
  :options="selectListOptions"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

选择类型

您有多种可供选择的选择类型。 它们是带有可选图标和时间戳的直接文本、单选框、复选框和切换。 文本默认为单项选择，复选框默认为多项选择。

使用radio支持单选。 复选框会插入图标所在的位置，因此您无法为多项选择同时有图标和复选框。 如果您仍然想要多项选择的图标，请使用toggle属性。 但是，这将取代时间戳选项。

<!-- 用于单选的单选框-->
<q-select
  radio
  v-model="select"
  float-label="Gogu"
  :options="selectListOptions"
/>

<!-- 用于多选的切换组件 -->
<q-select
  toggle
  multiple
  v-model="multipleSelect"
 :options="selectListOptions"
/>

选项数组格式

以下是您必须用来创建选择组件选项的选项数组示例：

选择组件选项对象：

selectOptions: [
  {
    label: 'Google',
    value: 'goog'
  },
  {
    label: 'Facebook',
    value: 'fb'
  },
  ...
]

更高级的选择组件列表对象示例：

selectListOptions: [
  {
    label: 'Google',
    icon: 'search',
    value: 'goog'
  },
  {
    label: 'Facebook',
    inset: true,
    sublabel: 'Enables communication',
    value: 'fb'
  },
  {
    label: 'Oracle',
    sublabel: 'Some Java for today?',

    icon: 'mail',
    leftColor: 'secondary', // 左边的颜色，不管它是什么（图标，字母，...）

    rightIcon: 'alarm',
    rightColor: 'negative', // 右边的颜色，不管它是什么（图标，字母，...）

    value: 'ora'
  },
  {
    label: 'Apple Inc.',
    inset: true,
    stamp: '10 min',
    value: 'appl'
  },
  ...
]

注意
将“inset”设置为“true”，而不是图标，以便标签文本与使用图标或头像的其他选项正确对齐。

对于上述每个选项使用对象（请注意，它使用列表和列表项组件的一些属性，如“label”、“sublabel”、“stamp”、“icon”、“rightIcon”等。下面是可用于每个选项的属性的完整列表：

属性 类型 说明
leftColor 字符串 Quasar调色板左侧的颜色。
icon 字符串 左侧的图标。
avatar 字符串 头像的静态URL。
letter 字符串 一个字符字符串。
leftInverted 布尔 反转模式，但仅适用于图标和字母。
leftTextColor 字符串 仅在使用图标或字母时覆盖默认的“white”文字颜色。
image 字符串 图像静态的URL。
label 字符串 选择项的主要标签。
sublabel 字符串 选择项的子标签。
labelLines 字符串/数字 标签可以扩展到的行数。
sublabelLines 字符串/数字 子标签可以扩展到的行数。
inset 布尔 插入标签，如果没有指定左侧（没有图标、头像、字母或图片）。
rightColor 字符串 Quasar调色板的右侧颜色。
rightIcon 字符串 右侧的图标。
rightAvatar 字符串 右侧头像的静态URL。
rightLetter 字符串 一个字符右侧的字符串。
rightImage 字符串 右侧图片静态URL。
rightInverted 布尔 反转模式，但仅适用于图标和字母。
rightTextColor 字符串 仅在使用图标或字母时覆盖默认的“white”文字颜色。
stamp 字符串 用于右侧。例如：’10分钟前’。

使用显示值

如果由于某种原因，您希望完全控制输入框中的文本（替换逗号分隔的选项字符串），则使用display-value属性：

<q-select
  :display-value="`${ multipleSelect.length } item${ multipleSelect.length !== 1 ? 's' : '' } selected`"
  multiple
  v-model="multipleSelect"
  float-label="Select a company"
  :options="selectLongListOptions"
/>

想要更优雅的解决方案（也更高效），请使用计算属性：

<template>
  <!-- 注意“display-value”绑定到“text”变量 -->
  <q-select
    :display-value="text"
    multiple
    v-model="multipleSelect"
    float-label="Select a company"
    :options="selectLongListOptions"
  />
</template>

<script>
export default {
  data () {
    return {
      multipleSelect: /* 值 */,
      selectOptions: /* 选项 */
    }
  },
  computed: {
    text () {
      //在这个例子中，我们想要显示选择了多少项，
      //所以我们需要检查模型（multipleSelect）的长度
      return `${this.multipleSelect.length} item${this.multipleSelect.length > 1 ? 's' : ''} selected`
    }
  }
}
</script>

懒惰输入

Vue很快会为组件上的v-model提供.lazy修饰符，但在此之前，您可以使用更长的等效形式：

<q-select
  :value="model"
  @change="val => { model = val }"
  :options="selectOptions"
/>

Vue方法

Vue方法 说明
show() 打开弹出框
hide() 关闭弹出框
clear() 将模型重置为空字符串。

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时立即触发。
@change(newVal) 模型值延迟更改时触发。
@clear(clearVal) 清除模型时触发。
@focus 当领域获得焦点时触发。
@blur 当领域失去焦点时触发。

更多示例

错误状态

使用error属性，将组件的颜色改为红色：

<q-select
  error
  multiple
  v-model="multipleSelect"
  :options="selectOptions"
/>

禁用

使用disable属性来停止对该字段的访问。

<!-- 禁用状态 -->
  <q-select
  disable
  float-label="Disabled Select"
  multiple
  v-model="multipleSelect"
  :options="selectOptions"
/>

标签

与任何输入一样，您有两个标签选项：堆栈和浮动。 除非你用包含自己标签的QField包装它。

<!-- 浮动标签 -->
<q-select
  float-label="This Label Floats"
  multiple
  v-model="multipleSelect"
  :options="selectOptions"
/>

<!-- 堆栈标签 -->
<q-select
  static-label="Company"
  multiple
  v-model="multipleSelect"
  :options="selectOptions"
/>

着色

使用color、inverted和frame-color道具来控制组件的颜色。

<!-- Color -->
<q-select
  color="amber"
  v-model="select"
  :options="selectListOptions"
/>

<!-- 反转颜色 -->
<q-select
  inverted
  color="secondary"
  v-model="select"
  :options="selectListOptions"
/>

<!--
  用碎片的自定义颜色。
-->
<q-select
  color="amber"
  chips-color="yellow"
  chips-bg-color="black"
  inverted-light
  multiple
  chips
  v-model="multipleSelect"
  :options="selectListOptions"
  float-label="Some label"
/>

注意
使用碎片作为选定值时，可选的frame-color属性很有用，它使碎片从背景颜色中脱颖而出。

在列表中使用

<q-list>
  <q-list-header>Single Selection</q-list-header>
  <q-item>
    <q-item-side icon="supervisor_account" />
    <q-item-main>
      <q-select
        class="no-margin"
        v-model="select"
        :options="selectOptions"
      />
    </q-item-main>
  </q-item>
  <q-item-separator />
  <q-list-header>Multiple Selection</q-list-header>
  <q-item>
    <q-item-side icon="supervisor_account" />
    <q-item-main>
      <q-select
        multiple
        class="no-margin"
        v-model="multipleSelect"
        :options="selectOptions"
      />
    </q-item-main>
  </q-item>
</q-list>
日期时间选择器 评分