Question

我想在失去焦点后立即删除工具提示，但是只有在默认过渡时间时它才会消失。

我使用element-ui https://element.eleme.io/#/en-US/component/tooltip中的工具提示组件

<el-tooltip 
    placement="bottom"
    :content="my text"
    :enterable="false"
>
  <div class="custom-item">Next</div>
</el-tooltip>

Answer 1

使用带有空值的过渡道具。

<el-tooltip
  placement="bottom"
  :content="my text"
  :enterable="false"
  transition="" <-- add this prop
>
  <div class="custom-item">Next</div>
</el-tooltip>

Answer 2

想要达到同样的效果，但不幸的是，他们在 mouseleave 上硬编码了 200 毫秒的去抖动

this.debounceClose = debounce(200, () => this.handleClosePopper());

https://github.com/ElemeFE/element/blob/dev/packages/tooltip/src/main.js#L75

实现它的黑客方法：

<el-tooltip
  transition=""
  :disabled="tooltipDisabled"
>
  <button
    @mouseleave="tooltipDisabled = true"
    @mouseenter="tooltipDisabled = false"
  ></button>
</el-tooltip>

如何从element-ui中删除工具提示组件中的淡出过渡？

2 个答案: