vue-pick-colors

中文

English

中文

English

Appearance

快速上手 ​

基本使用 ​

value 设置为 #ff4500

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

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

vue
<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>
<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

vue
<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>
<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>

设置格式选项 ​

format-options 设置为 ['rgb', 'hex', 'hsl', 'hsv']

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

<script lang="ts" setup>
  import pickColors, { Format } from 'vue-pick-colors'
  const value = ref('#1e90ffff')
  const format = ref<Format>('rgb')
  const formatOptions = ref<Format []>(['rgb', 'hex', 'hsl', 'hsv'])
</script>
<template>
  <pick-colors v-model:value="value" :format="format" :format-options="formatOptions" show-alpha/>
</template>

<script lang="ts" setup>
  import pickColors, { Format } from 'vue-pick-colors'
  const value = ref('#1e90ffff')
  const format = ref<Format>('rgb')
  const formatOptions = ref<Format []>(['rgb', 'hex', 'hsl', 'hsv'])
</script>

设置尺寸 ​

使用 size

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

width 设置 80

height 设置 80

vue
<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>
<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

vue
<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>
<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

vue
<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" 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>

控制拾取器 ​

vue
<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>
<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

vue
<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>
<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 | string20
width色块宽度
如果为空使用 size属性		number | string—1.5.0
height色块高度
如果为空使用 size属性		number | string—1.5.0
theme主题light ｜ darklight
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 ｜ hsvhex
show-alpha是否支持透明度选择booleanfalse
add-color是否支持添加颜色booleanfalse
popup-container定义拾取器的容器string | Vue.RendererElement'body'1.5.0
z-index拾取器的层级number10001.5.0
max添加颜色最大数number13
format-options格式选项，当为false时，不出现选项(hex ｜ rgb ｜ hsl ｜ hsv) [] | false['rgb', 'hex', 'hsl', 'hsv']1.7.0
position定位方式absolute | fixedabsolute1.7.0
placement弹出窗口的位置bottom | top | left | rightbottom1.7.0

事件 ​

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