vue-poster-editor/lib/widgets/editor-color-picker.html

A poster editor based on Vue.js

<div class="editor-color-picker" :class="{active:isShow}">
    <button
        class="editor-toolbar-btn"
        @click="toggleShow($event)"
    >
        <i
            class="icon-color"
            :class="{light: isLightColor}"
            :style="{
                backgroundColor: color
            }"
        ></i>
    </button>
    <div class="editor-popup editor-popup-ne" v-if="isShow">

        <div class="editor-color-wrapper">

            <editor-color-hue
                v-if="pickerType === 0"
                :color.sync="pickerColor"
            ></editor-color-hue>

            <editor-color-block
                v-if="pickerType === 1"
                :color.sync="pickerColor"
            ></editor-color-block>

            <div class="color-kit">
                <div class="color-history">
                    <span>最近使用</span>
                    <editor-color-history
                        tage="global"
                        :set-color="setColor"
                        len="8"
                    ></editor-color-history>
                </div>
                <div class="color-switch">
                    <span v-text="['色板','调色'][pickerType]"></span>
                    <div class="switch-icon"
                        :class="['icon-hue','icon-block'][pickerType]"
                        @click="switchPickerType"
                    >
                        <b></b>
                    </div>
                </div>
            </div>

        </div>


    </div>
</div>