<template>
    <el-color-picker
        show-alpha
        size="medium"
        :value="color"
        :predefine="predefineColors"
        @change="val => $emit('change', val)"
    >
    </el-color-picker>
</template>

<script>
export default {
    name: "SelectColor",
    components: {},
    props: {
        color: {
            type: String
        }
    },
    computed: {},
    watch: {},
    model: {
        prop: 'color',
        event: 'change'
    },
    data() {
        return {
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
            ]
        }
    },
    mounted() {
    },
    created() {
    },
    destroyed() {
    },
    methods: {}
}
</script>

<style scoped lang="scss">
.SelectColor {
}
</style>
