颜色输入（Color Input）

Color组件提供了一种输入颜色的方法。 还有一个版本可用：选色器。

对于辅助函数、错误消息占位符等许多其他功能，可与QField很好地协作。
您可能还想查看Color Utils.

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QColor']
}

基本用法

<template>
  <q-color v-model="modelHex" />
</template>

<script>
export default {
  data: () => ({
    modelHex: '#C7044B',

    // 和其他类型的模型：
    modelHexa: '#F0FF1CBF',
    modelRgb: { r: 112, g: 204, b: 55 },
    modelRgba: { r: 138, g: 36, b: 138, a: 64 }
  })
}

Vue属性

支持v-model，它必须是一个字符串，数字或日期对象。

Vue属性 类型 说明
clearable 布尔 如果设置为“true”，则该组件向用户提供可操作的图标以移除当前选择。
readonly 布尔 如果设置为“true”，组件将显示为只读。
default-value 字符串/数字/日期 当模型尚未设置时，选择器的默认日期/时间。
display-value 字符串 要在输入框上显示的文本。取代’占位符’。
hide-underline 布尔 隐藏底部边框。
popover 布尔 无论平台如何，始终使用弹出框进行显示。
modal 布尔 无论平台如何，始终以模态框显示。
format-model 字符串 模型的数据类型（特别是当用undefined或null开始时很有用）。 ‘auto’、’hex’、’rgb’、’hexa’、’rgba’之一。
placeholder 字符串 模型未设置（空）时输入框的占位符文本。
ok-label 字符串 接受输入的按钮文本（使用模态框时）。
cancel-label 字符串 取消输入（不更改）的按钮文本（使用模态框时）。

通用输入框属性：

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

懒惰输入

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

<q-color
  :value="model"
  @change="val => { model = val }"
/>

图标按钮

本部分引用了before和after属性，可以将其他按钮作为图标添加到组件中。 这是两个属性的结构：

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

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

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

例子:

<!--
  当组件发生错误时（通过“error”属性）
  显示一个图标按钮（icon设为“warning“）
-->
<q-color
  v-model="color"
  :error="error"
  :after="[
    {
      icon: 'warning',
      error: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

<!--
  当模型具有非空值时
  显示一个图标按钮（icon设为“arrow_forward“）
-->
<q-color
  v-model="color"
  :after="[
    {
      icon: 'arrow_forward',
      content: true,
      handler () {
        // do something...
      }
    }
  ]"
/>

Vue方法

Vue方法 说明
show() 显示选择日期和/或时间的弹出窗口（在桌面上）和对话框（在手机上）。 返回一个Promise。
hide() 隐藏选择日期和/或时间的弹出窗口（在桌面上）和对话框（在手机上）并在隐藏后执行功能。 返回一个Promise。
toggle() 切换弹出框或模态框。
clear() 将模型设置为空字符串（删除当前值）。

Vue事件

Vue事件 说明
@input（newVal） 模型值更改立即触发。
@change（newVal） 模型值延迟更改时触发。
@clear(clearVal) 清除模型时触发。
@blur 当模态/弹出框关闭触发。
@focus 当模态/弹出框打开时触发。

更多示例

着色

使用color和inverted/inverted-light属性来控制颜色。

<q-color
  color="amber-7"
  float-label="Float Label"
  v-model="model"
/>

<q-color
  inverted
  color="primary"
  float-label="Float Label"
  v-model="model"
/>

此外，如果QColor显示在黑色背景上，请添加“dark”属性。

<q-color dark color="secondary" />

碎片输入 选色器