紫色选手

现场直播

安装

$ yarn add @caohenghu/vue-colorpicker

示例

<template>
    <div :style="{background: color}">
        <color-picker
            theme="light"
            :color="color"
            :sucker-hide="false"
            :sucker-canvas="suckerCanvas"
            :sucker-area="suckerArea"
            @changeColor="changeColor"
            @openSucker="openSucker"
        />
    </div>
</template>

<script>
    import colorPicker from '@caohenghu/vue-colorpicker'

    export default {
        components: {
            colorPicker
        },
        data() {
            return {
                color: '#59c7f9',
                suckerCanvas: null,
                suckerArea: [],
                isSucking: false
            }
        },
        methods: {
            changeColor(color) {
                const { r, g, b, a } = color.rgba
                this.color = `rgba(${r}, ${g}, ${b}, ${a})`
            },
            openSucker(isOpen) {
                if (isOpen) {
                    // ... canvas be created
                    // this.suckerCanvas = canvas
                    // this.suckerArea = [x1, y1, x2, y2]
                } else {
                    // this.suckerCanvas && this.suckerCanvas.remove
                }
            }
        }
    }
</script>

选项

color 是单向数据流,所以你不能使用 v-model为什么? 因为你会听 changeColor 事件做更多的事情, 所以我认为它没有必要在这里.

活动

如果你想用吸盘,那么 openSucker, (中文(简体) ), sucker-hide, (中文(简体) ), sucker-canvas, (中文(简体) ), sucker-area 这是必要的。 当单击吸管按钮时,可以再次单击或按下 esc 离开.