选色器(Color Picker)

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

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

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QColorPicker']
}

基本用法

<template>
  <q-color-picker 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属性 类型 说明
dark 布尔 组件在黑暗的背景下呈现？
default-value 字符串/对象 当模型尚未设置时，选择器的默认颜色(十六进制/rgb)。
format-model 字符串 模型的数据类型（特别是当用undefined或null开始时很有用）。 ‘auto’、’hex’、’rgb’、’hexa’、’rgba’之一。
readonly 布尔 如果设置为“true”，组件将显示为只读。
disable 布尔 如果设置为“true”，则组件被禁用，用户不能更改模型。

懒惰输入

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

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

Vue方法

Vue方法 说明
clear() 将模型设置为空字符串（删除当前值）。

Vue事件

Vue事件 说明
@input(newVal) 模型值更改时立即触发。
@change(newVal) 模型值延迟更改时触发。

更多示例

着色

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

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

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

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

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

颜色输入 自动完成