el-tooltip设置5秒后自动隐藏
时间: 2024-02-05 18:17:09 浏览: 217
你可以使用 `setTimeout` 函数来实现 `el-tooltip` 在显示一段时间后自动隐藏。具体实现可以参考以下代码:
```html
<template>
<div>
<el-button type="primary" v-el:target>Hover Me</el-button>
<el-tooltip
effect="dark"
placement="top"
:content="tooltipContent"
:visible-arrow="false"
:popper-options="{ boundariesElement: 'body' }"
v-model="tooltipVisible"
@show="onTooltipShow"
@hide="onTooltipHide"
>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
tooltipContent: 'Tooltip Content',
tooltipVisible: false,
timer: null
}
},
methods: {
onTooltipShow() {
this.timer = setTimeout(() => {
this.tooltipVisible = false
}, 5000)
},
onTooltipHide() {
clearTimeout(this.timer)
}
}
}
</script>
```
以上代码中,我们使用了 `setTimeout` 函数来在 `onTooltipShow` 方法中设置一个定时器,5秒后将 `tooltipVisible` 属性设置为 `false`,从而隐藏 `el-tooltip`。同时,在 `onTooltipHide` 方法中需要清除定时器,以避免在 `el-tooltip` 隐藏之前清除定时器导致 `el-tooltip` 无法正常显示。
阅读全文