颜色选择器

Quasar 工具函数
颜色工具

QColor 组件提供了一种输入颜色的方式。

TIP

有关处理颜色，也请查看 Quasar 颜色工具.

QColor API

QColor API
name
: String
说明
用于指定控件的名称；如果处理直接提交到 URL 的表单，则非常有用
default-view
: String
说明
选择器的默认视图

用法

基础

<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-color v-model="hex" class="my-picker" />
    <q-color v-model="hexa" class="my-picker" />
    <q-color v-model="rgb" class="my-picker" />
    <q-color v-model="rgba" class="my-picker" />
  </div>
</template>

与 QInput 一起使用

<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row items-start">
      <q-input
        filled
        v-model="color"
        class="my-input"
      >
        <template v-slot:append>
          <q-icon name="colorize" class="cursor-pointer">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-color v-model="color" />
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>

      <q-input
        filled
        v-model="secondColor"
        :rules="['anyColor']"
        hint="With validation"
        class="my-input"
      >
        <template v-slot:append>
          <q-icon name="colorize" class="cursor-pointer">
            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
              <q-color v-model="secondColor" />
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input>
    </div>
  </div>
</template>

这里有一些可以用在 QInput 的 rules 中的工具：完整列表。 为了方便起见，您可以使用它们，也可以编写指定自定义需求的字符串。

示例： “hexColor”, “rgbOrRgbaColor”, “anyColor”.

更多信息： QInput.

不要头部或底部

您可以选择不渲染头部或底部，比如下面的例子:

<template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-color v-model="hex" no-header class="my-picker" />
    <q-color v-model="hex" no-header-tabs class="my-picker" />
    <q-color v-model="hex" no-footer class="my-picker" />
    <q-color v-model="hex" no-header no-footer class="my-picker" />
  </div>
</template>

自定义默认视图

您还可以选择默认视图，如下面的示例所示，在这里我们还指定不希望渲染头部和底部。最终结果生成了一个漂亮的调色板，用户可以从中选择：

<template>
  <div class="q-pa-md">
    <q-badge color="grey-3" text-color="black" class="q-mb-sm">
      {{ hex }}
    </q-badge>

    <q-color
      v-model="hex"
      no-header
      no-footer
      default-view="palette"
      class="my-picker"
    />
  </div>
</template>
#FF00FF

自定义调色盘

<template>
  <div class="q-pa-md">
    <q-badge color="grey-3" text-color="black" class="q-mb-sm">
      {{ hex }}
    </q-badge>

    <q-color
      v-model="hex"
      default-view="palette"
      :palette="[
        '#019A9D', '#D9B801', '#E8045A', '#B2028A',
        '#2A0449', '#019A9D'
      ]"
      class="my-picker"
    />
  </div>
</template>
#FF00FF

暗色模式

<template>
  <div class="q-pa-md">
    <div class=" row items-start q-gutter-md">
      <q-color v-model="hex" dark class="my-picker" />
      <q-color v-model="hexa" dark class="my-picker" />
      <q-color v-model="rgb" dark class="my-picker" />
      <q-color v-model="rgba" dark class="my-picker" />
    </div>
  </div>
</template>

默认值

<template>
  <div class="q-pa-md">
    <q-color
      v-model="nullModel"
      default-value="#285de0"
      style="max-width: 250px"
    />
  </div>
</template>

懒更新

<template>
  <div class="q-pa-md">
    <q-badge color="grey-3" text-color="black" class="q-mb-sm">
      {{ hex }}
    </q-badge>

    <q-color
      :model-value="hex"
      @change="val => { hex = val }"
      style="max-width: 250px"
    />
  </div>
</template>
#112e1b

禁用或只读

<template>
  <div class="q-pa-md">
    <div class="row items-start q-gutter-md">
      <q-color
        v-model="color"
        disable
        class="my-picker"
      />

      <q-color
        v-model="color"
        readonly
        class="my-picker"
      />
    </div>
  </div>
</template>

原生表单提交

当处理一个带有 action 和 method 的原生表单时（如：使用 Quasar 和 ASP.NET 控制器时），您需要为 QColor 声明 name 属性，否则表单数据中不会包含它：

<template>
  <div class="q-pa-md">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <q-color
        name="accent_color"
        v-model="color"
        style="width: 200px; max-width: 100%;"
      />

      <div>
        <q-btn label="Submit" type="submit" color="primary"/>
      </div>
    </q-form>

    <q-card flat bordered class="q-mt-md bg-grey-2" v-if="submitResult.length > 0">
      <q-card-section>Submitted form contains the following formData (key = value):</q-card-section>
      <q-separator />
      <q-card-section class="row q-gutter-sm items-center">
        <div
          v-for="(item, index) in submitResult"
          :key="index"
          class="q-px-sm q-py-xs bg-grey-8 text-white rounded-borders text-center text-no-wrap"
        >{{ item.name }} = {{ item.value }}</div>
      </q-card-section>
    </q-card>
  </div>
</template>
查看更多？
Vue 组件
Circular Progress 环形进度
Vue 组件
Dialog 对话框
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。