iview/examples/routers/color-picker.vue

<template>
    <div style="margin: 100px;">
        {{color}}
        <!--<Input placeholder="请输入..." size="large" style="width: 50px;"></Input>-->
        <color-picker
            v-model="color"
            placement="bottom-start"
            @on-change="c1"
            @on-active-change="c2"></color-picker>
        <Input value="hello" style="display: inline-block" />
        <Date-picker
            type="date"
            placeholder="选择日期"
            style="width: 200px"></Date-picker>
        <color-picker
            ref="xxx"
            v-model="color"
            :recommend="true"
            format="rgb"
            alpha
            @on-change="onChange"
            @on-active-change="onActiveChange"></color-picker>
        <color-picker
            v-model="color2"
            :alpha="true"
            :recommend="false"
            format="hsv"></color-picker>
        <!--<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
        <color-picker
            v-model="color"
            placement="bottom-start"
            ></color-picker>
        <Date-picker
            type="date"
            placeholder="选择日期"
            style="width: 200px"></Date-picker>
        <color-picker
            ref="yyy"
            :colors="colors"
            v-model="color"
            format="rgb"
            alpha></color-picker>
        <Button @click="setColor">set color</Button>

        <br><br><br><br>
        {{openState}}
        <ColorPicker
            v-model="color7"
            :hue="false"
            @on-open-change="onOpenChange"></ColorPicker>
        <ColorPicker
            v-model="color7"
            :hue="false"
            :hide-drop-down="hideDropDown"
            @on-open-change="onOpenChange"></ColorPicker>

        <br><br><br><br>
        <ColorPicker
            v-model="color7"
            disabled></ColorPicker>
    </div>
</template>

<script>
export default {
    props: {},

    data() {
        return {
            color: 'rgba(12,34,255,.85)',
            color2: '',
            color7: '#19be6b',
            openState: false,
            colors: [
                '#2d8cf0',
                '#19be6b',
                '#ff9900',
                '#ed3f14',
                '#00b5ff',
                '#19c919',
                '#f9e31c',
                '#ea1a1a',
                '#9b1dea',
                '#00c2b1',
                '#ac7a33',
                '#1d35ea',
                '#8bc34a',
                '#f16b62',
                '#ea4ca3',
                '#0d94aa',
                '#febd79',
                '#5d4037',
                '#00bcd4',
                '#f06292',
                '#cddc39',
                '#607d8b',
                '#000000',
                '#ffffff',
                '#2d8cf0',
                '#19be6b',
                '#ff9900',
                '#ed3f14',
                '#00b5ff',
                '#19c919',
                '#f9e31c',
                '#ea1a1a',
                '#9b1dea',
                '#00c2b1',
                '#ac7a33',
                '#1d35ea',
                '#8bc34a',
                '#f16b62',
                '#ea4ca3',
                '#0d94aa',
                '#febd79',
                '#5d4037',
            ],
            hideDropDown: false,
        };
    },

    computed: {},

    mounted() {
        setInterval(this.toggleShowHide, 2000);
    },

    methods: {
        setColor() {
            this.color = '#26bc77';
        },
        c1(d) {
            console.log(d);
        },
        c2(d) {
            console.log(d);
        },
        onOpenChange(state) {
            this.openState = state;
        },
        onChange(d) {
            console.log(d);
        },
        onActiveChange(d) {
            console.log(d);
        },
        toggleShowHide() {
            this.hideDropDown = !this.hideDropDown;
        },
    },
};
</script>