快速上手

基本使用

value 设置为 #ff4500

<template>
  <pick-colors v-model:value="value"/>
</template>

<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#ff4500')
</script>

使用透明度

使用 show-alpha

<template>
  <pick-colors v-model:value="value" show-alpha/>
</template>

<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('rgba(255, 69, 0, 0.68)')
</script>

设置格式化

format 设置为 rgb

<template>
  <pick-colors v-model:value="value" :format="format" show-alpha/>
</template>

<script lang="ts" setup>
  import pickColors, { Format } from 'vue-pick-colors'
  const value = ref('#90ee90')
  const format = ref<Format>('rgb')
</script>

设置尺寸

使用 size

如果 width 或者 height 为空，则使用 size

width 设置 80

height 设置 80

<template>
  <pick-colors v-model:value="value"/>
  <pick-colors v-model:value="value" :width="width"/>
  <pick-colors v-model:value="value" :height="height"/>
</template>

<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#00ced1')
  const size = ref(40)
  const width = ref(80)
  const height = ref(80)
</script>

设置预定义颜色

使用 colors

<template>
  <pick-colors v-model:value="value" show-alpha :colors="colors"/>
</template>

<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#1e90ffff')
  const colors = ref([
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        '#ff4500',
        '#ffd700',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
    ])
</script>

使用主题

使用 theme

<template>
  <pick-colors v-model:value="value" show-alpha :theme="theme" />
</template>
<script lang="ts" setup>
  import pickColors, { Theme } from 'vue-pick-colors'
  const theme = ref<Theme>('dark')
  const value = ref('#1e3b56ff')
</script>

控制拾取器

<template>
  <pick-colors v-model:value="value" v-model:show-picker="showPicker"/>
  <button class="primary-button" @click="toggleShowPicker">{{ showPicker ? '关闭' : '打开' }}</button>
</template>
<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#fa64c3')
  const showPicker = ref(false)
</script>
<style scoped>
  .primary-button {
    color: #fff;
    border-color: #1890ff;
    background: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px #0000000b;
    padding: 3px 20px;
    border-radius: 5px;
    display: inline;
    font-weight: 500;
    margin:0 10px;
  }
</style>

添加颜色

使用 add-color

<template>
  <pick-colors v-model:value="value" add-color />
</template>
<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#1f93ff')
</script>

API

属性	说明	类型		版本
value(v-model)	值， 支持hex、rgb、rgba、hsl、hsla、hsv、hsva	string ｜ string[]	—
show-picker(v-model)	控制拾取器隐藏或显示	boolean	—	1.5.0
size	颜色块大小	number | string	20
width	色块宽度 如果为空使用 size属性	number | string	—	1.5.0
height	色块高度 如果为空使用 size属性	number | string	—	1.5.0
theme	主题	light ｜ dark	light
colors	预留颜色组 支持hex、rgb、rgba、hsl、hsla、hsv、hsva	string []	['#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1','#1e90ff', '#c71585','#ff4500','#ff7800', '#00babd','#1f93ff','#fa64c3']
format	颜色值格式化	hex ｜ rgb ｜ hsl ｜ hsv	hex
show-alpha	是否支持透明度选择	boolean	false
add-color	是否支持添加颜色	boolean	false
popup-container	定义拾取器的容器	string | Vue.RendererElement	'body'	1.5.0
z-index	拾取器的层级	number	1000	1.5.0
max	添加颜色最大数	number	13

事件

事件名	描述	参数	版本
change	颜色值变化	function(value: string｜string [],color: string,index: number)
close-picker	关闭拾取器	function(value: string｜string [])	1.5.0
overflow-max	颜色添加达到最大值	—