如何在元素 UI 折叠的水平菜单中编辑 open-delay

Question

当您在折叠的水平菜单中快速将鼠标悬停在菜单项上时，我觉得有点烦人。所以我想编辑显示工具台的秒数。

ELement UI 的工具提示组件有一个属性，让我们可以编辑工具提示的 open-delay。

我们如何在显示菜单项标题的折叠水平菜单中执行此操作？

Answer 1

要编辑元素 UI 中的打开延迟，只需更改打开延迟属性，根据需要绑定您想要的毫秒值，即一秒应该是 1000。像这样：

<el-tooltip content="Top center" :open-delay="1000" placement="top">
<el-button>Dark</el-button>
</el-tooltip>

如果您需要缩短持续时间，请使用较小的数字，反之亦然。

查看文档 Element UI docs

对于您的情况，用工具提示包裹菜单项元素并根据需要配置打开延迟示例：

<el-tooltip class="item" effect="dark" :open-delay="1000" 
content="Right Center prompts info" placement="right">
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span  >Navigator Two</span>
</el-menu-item>
</el-tooltip>

see fiddle

Answer 2

根据@Lupyana 的回答，我只需要为其添加一些内容以适应我真正想要发生的事情。

而不是让 element-ui 在菜单折叠时自动转换工具提示。我们所要做的就是通过在工具提示未折叠时禁用工具提示来手动完成它，这样它就不会在菜单展开时显示。

来自：

<el-menu-item index="/">
    <span slot="title">Home</span>
</el-menu-item>

至：

<el-tooltip effect="dark" :open-delay="300" content="Home" placement="right" :disabled="!is_collapse">
    <el-menu-item index="/">
        <span>Home</span>
    </el-menu-item>
</el-tooltip>

Answer 3

没有原生方式，因为组件没有考虑它。所以@Lupyana Mbembati 解决方案有效：

<el-tooltip effect="dark" placement="right" content="About" :open-delay="400">
    <el-menu-item :index="localePath('index')">
        <i class="el-icon-user"></i>
    </el-menu-item>
</el-tooltip>

如何在元素 UI 折叠的水平菜单中编辑 open-delay

How to edit open-delay in Element UI collapsed horizontal menu

vuejs2

element-ui