取色器

v-color-picker 允许您使用各种输入方法选择颜色。

用例

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

模型

v-color-picker 使用 v-model 属性来控制显示的颜色。它支持十六进制字符串，如 #FF00FF 和 #FF00FF00，对象代表 RGBA， HSLA 和 HSVA 值。

template script

<template>
  <v-container>
    <v-row>
      <v-col
        cols="12"
        md="4"
      >
        <v-btn
          v-for="t in types"
          :key="t"
          class="my-4"
          block
          @click="type = t"
        >{{ t }}</v-btn>
      </v-col>
      <v-col
        class="d-flex justify-center"
      >
        <v-color-picker v-model="color"></v-color-picker>
      </v-col>
      <v-col
        cols="12"
        md="4"
      >
        <v-sheet
          dark
          class="pa-4"
        >
          <pre>{{ showColor }}</pre>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      types: ['hex', 'hexa', 'rgba', 'hsla', 'hsva'],
      type: 'hex',
      hex: '#FF00FF',
      hexa: '#FF00FFFF',
      rgba: { r: 255, g: 0, b: 255, a: 1 },
      hsla: { h: 300, s: 1, l: 0.5, a: 1 },
      hsva: { h: 300, s: 1, v: 1, a: 1 },
    }),
    computed: {
      color: {
        get () {
          return this[this.type]
        },
        set (v) {
          this[this.type] = v
        },
      },
      showColor () {
        if (typeof this.color === 'string') return this.color
        return JSON.stringify(Object.keys(this.color).reduce((color, key) => {
          color[key] = Number(this.color[key].toFixed(2))
          return color
        }, {}), null, 2)
      },
    },
  }
</script>

色板

使用 show-swatches 属性，您可以显示用户可以选择的一系列色样。 也可以使用 swatches 属性自定义显示什么颜色。 该属性接受二维数组，其中第一维定义一列，第二维通过提供 rgba hex 字符串从上到下定义色板。 您还可以使用 swatches-max-height 属性设置色板部分的最大高度。

template script

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" show-swatches></v-color-picker>
    <v-color-picker class="ma-2" :swatches="swatches" show-swatches></v-color-picker>
    <v-color-picker class="ma-2" show-swatches swatches-max-height="300px"></v-color-picker>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      swatches: [
        ['#FF0000', '#AA0000', '#550000'],
        ['#FFFF00', '#AAAA00', '#555500'],
        ['#00FF00', '#00AA00', '#005500'],
        ['#00FFFF', '#00AAAA', '#005555'],
        ['#0000FF', '#0000AA', '#000055'],
      ],
    }),
  }
</script>

Vuetify Epic Backpack

The Vuetify Epic Backpack is a premium backpack that has a spot for everything you travel with.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-epic-backpack?ref=vuetifyjs.com)

输入

数字输入可以用 hide-inputs 属性隐藏。你也可以用 hide-mode-switch 属性隐藏模式切换图标。模式也可以通过 mode 属性进行外部控制。

template script

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-inputs></v-color-picker>
    <v-color-picker class="ma-2" hide-mode-switch></v-color-picker>
    <v-row class="ma-2" style="flex: 0 0 auto">
      <v-color-picker :mode.sync="mode"></v-color-picker>
      <v-select v-model="mode" :items="modes" style="max-width: 300px"></v-select>
    </v-row>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      mode: 'hsla',
      modes: ['hsla', 'rgba', 'hexa'],
    }),
  }
</script>

画布

可以使用 hide-canvas 属性隐藏画布，并且可以使用 canvas-height 属性设置画布的高度。 选择点的大小可以通过 dot-size 属性来控制。

template

<template>
  <v-row justify="space-around">
    <v-color-picker class="ma-2" hide-canvas></v-color-picker>
    <v-color-picker class="ma-2" canvas-height="300"></v-color-picker>
    <v-color-picker class="ma-2" dot-size="30"></v-color-picker>
  </v-row>
</template>