截止至 饿了么 Element Plus 2.8.1版本的组件库,color picker组件不支持自定义颜色选择弹窗里的按钮!!!只好另辟蹊径解决这个问题。
<template>
<div class="color_box flex between">
<el-color-picker
ref="colorPickerRef"
:popper-class="'color_box_popper ' + randomClass"
v-model="modelValue"
color-format="hex"
:showAlpha="showAlpha"
:predefine="predefineColors"
@focus="isOpen = true"
@blur="isOpen = false"
@active-change="realTimeChange"
/>
<vk-icon
v-if="hasEyeDropper && props.showEyeDropper"
class="eyedropper flex"
icon=""
size="20"
@click="eyeDropper"
></vk-icon>
<Teleport :to="`.${randomClass} .el-color-dropdown__btns`">
<el-button size="small" class="teleport_button" @click="clearColor">
{{ $t("Editor.Button.Clear") }}
</el-button>
</Teleport>
</div>
</template>
const randomClass = ref("random-" + Math.random().toString(36).substring(2));
<style lang="scss">
.color_box_popper {
.el-color-predefine__color-selector > div {
border: 1px solid #c3c3c38d !important;
}
.el-button:not(.teleport_button) {
display: none;
}
}
</style>