颜色输入(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 }"
/>

图标按钮

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

{
// 必需的图标
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 当模态/弹出框打开时触发。

更多示例

着色

使用colorinverted/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" />