<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <div class="block">
                        <span class="demonstration">有默认值</span>
                        <e-color-picker v-model="color1"></e-color-picker>
                        </div>
                        <div class="block">
                        <span class="demonstration">无默认值</span>
                        <e-color-picker v-model="color2"></e-color-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
            <!-- 选择透明度 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>选择透明度</span>
                    </div>
                    <div>
                        <e-color-picker v-model="color" show-alpha></e-color-picker>
                    </div>
                </e-card>
            </e-col>
            <!-- 预定义颜色 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>预定义颜色</span>
                    </div>
                    <div>
                        <e-color-picker
                        v-model="color"
                        show-alpha
                        :predefine="predefineColors">
                        </e-color-picker>
                    </div>
                </e-card>
            </e-col>
            <!-- 不同尺寸 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>不同尺寸</span>
                    </div>
                    <div>
                        <div class="block">
                            <e-color-picker v-model="color3"></e-color-picker>
                        </div>
                        <div class="block">
                            <e-color-picker v-model="color3" size="medium"></e-color-picker>
                        </div>
                        <div class="block">
                            <e-color-picker v-model="color3" size="small"></e-color-picker>
                        </div>
                        <div class="block">
                            <e-color-picker v-model="color3" size="mini"></e-color-picker>
                        </div>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            color1: '#409EFF',
            color2: null,
            color: 'rgba(19, 206, 102, 0.8)',
            color3: '#409EFF',
            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() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}
  </style>
