526互联

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

发布时间 2023-09-21 22:08:17作者: Himmelbleu

问题描述

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>

el-picker show 函数调用之后打开立即关闭问题

问题解决

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

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