问题描述

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

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
}