问题场景:鼠标移动到按钮上,显示气泡框,气泡框里面包含取色器,当鼠标移动到取色器画布上时,取色器和气泡框会一起消失
解决方法:在取色器上添加:teleported=false
teleported:控制是否将颜色选择器的 DOM 结构插入到 body 标签下,默认是 true,这里设置为 false 表示保留在父级元素内。
部分示例代码:
<el-popover
placement="bottom"
title="主题设置"
trigger="hover"
:width="300"
>
<el-form>
<el-form-item label="主题颜色">
<el-color-picker
v-model="color"
show-alpha
size="small"
:predefine="predefineColors"
@change="setColor"
:teleported="false"
/>
</el-form-item>
<el-form-item label="暗黑模式">
<el-switch
v-model="dark"
class="mt-2"
inline-prompt
active-icon="Check"
inactive-icon="Close"
size="small"
/>
</el-form-item>
</el-form>
<template #reference>
<el-button
icon="Setting"
circle
></el-button>
</template>
</el-popover>