ColorPicker 颜色选择器

概述

用于颜色选择，支持多种颜色格式，支持颜色预设。

代码示例

基础用法

基本用法，可以使用 v-model 实现数据的双向绑定。

<template>
    <Row>
        <Col span="12">
            有默认值
            <ColorPicker v-model="color1" />
        </Col>
        <Col span="12">
            无默认值
            <ColorPicker v-model="color2" />
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                color1: '#19be6b',
                color2: ''
            }
        }
    }
</script>

透明度

开启属性 alpha，可以选择带 Alpha 通道的颜色。

<template>
    <ColorPicker v-model="color3" alpha />
</template>
<script>
    export default {
        data () {
            return {
                color3: 'rgba(25, 190,107, .5)'
            }
        }
    }
</script>

色彩

设置属性 hue 为 false，可以禁用色彩选项。

<template>
    <ColorPicker v-model="color7" :hue="false" />
</template>
<script>
    export default {
        data () {
            return {
                color7: '#19be6b'
            }
        }
    }
</script>

颜色预设

开启属性 recommend 可以显示推荐的颜色预设，或设置属性 colors 来自定义预设颜色。

<template>
    <Row>
        <Col span="12">
            <ColorPicker v-model="color4" recommend />
        </Col>
        <Col span="12">
            <ColorPicker v-model="color5" :colors="colors" />
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                color4: '#19be6b',
                color5: '#19be6b',
                colors: ['#311B92', '#512DA8', '#673AB7', '#9575CD', '#D1C4E9']
            }
        }
    }
</script>

尺寸

选择器有三种尺寸：大、默认（中）、小。

<template>
    <Row>
        <Col span="8">
            <ColorPicker v-model="color6" size="large" />
        </Col>
        <Col span="8">
            <ColorPicker v-model="color6" />
        </Col>
        <Col span="8">
            <ColorPicker v-model="color6" size="small" />
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                color6: '#19be6b'
            }
        }
    }
</script>

API

ColorPicker props

ColorPicker events