Question

当您将鼠标悬停在折叠的水平菜单中的菜单项上时，我会感到有点烦。所以我想编辑显示工具栏的秒数。

ELement UI的工具提示组件具有一个属性，可让我们编辑工具提示的打开延迟。

我们如何在折叠的水平菜单中显示菜单项的标题？

Answer 1

要在元素UI中编辑打开延迟，请同时更改open-delay属性，根据需要绑定所需的值（以毫秒为单位），即一秒钟应为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 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>

Answer 3

基于@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>

如何在Element UI折叠的水平菜单中编辑打开延迟

3 个答案: