ElPlus - color-picker 暴露的 show 函数调用时面板开启又关闭问题

问题描述

ElPlus 2.3.3 版本之后给我们提供了两个 expose 函数——show 和 hide，在 2.3.14 版本中，调用 show 函数时会遇到一个问题：调用之后 color-picker 组件显示了，但很快又会被关闭。

cover:(https://element-plus.org/images/element-plus-logo.svg) title:(ColorPicker 颜色选择器) link:(https://element-plus.org/zh-CN/component/color-picker.html#exposes)

file:[Demo.vue]
<script setup>
const textColorPickerRef = ref();

function open() {
  textColorPickerRef.value.show();
}

function close() {
  textColorPickerRef.value.hide();
}
</script>

<template>
<el-color-picker
  ref="textColorPickerRef"
  v-model="Data.textColor.value" />
<el-button @click="open">open</el-button>
<el-button @click="close">hide</el-button>
</template>

问题解决

经过我的尝试，给这个 show 函数外面套一层延时函数就可以正常打开组件。我设置的是 100ms。

file:[Demo.vue - script]
function open() {
  add:[setTimeout(() => {
    textColorPickerRef.value.show();
  }, 100);]:add
}